What
Contrast ratios as defined by WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Colour and contrast used properlyin your website design can create a visually appealing, user-friendly, and accessible experience that reflects your brand and effectively communicates your message. But, used badly can ruin the design and create a negative user experience.
Why
Colour and contrast in a website impact everything from user experience and accessibility to branding and aesthetics.
Importance of Colour:
Branding and Identity: Colours establish your brand's personality, conveying emotions, values, and trustworthiness. A well-chosen colour palette can leave a lasting impression and set you apart from competitors.
Visual Hierarchy and Emphasis: Colour can guide user attention to key elements like calls to action, important information, or navigation buttons.
Mood and Atmosphere: Different colours evoke distinct emotions and can influence how users perceive your website's tone and purpose. Warm colours like orange and red can be energising, while cool tones like blue and green can be calming or professional.
Importance of Contrast:
Accessibility: High contrast between text and background is crucial for users with visual impairments or in low-light situations. Poor contrast makes text difficult to read, leading to frustration and potential exclusion.
Readability and Clarity: Adequate contrast ensures text is crisp and easy to scan, improving comprehension and information absorption.
Visual Appeal: Strategic use of contrast can create visual interest and prevent websites from looking flat or bland. It can highlight important information and add visual depth.
How
Common sense. Get a variety of users to look at your site and feedback.
From a W3C technical perspective you can read here. There are also a number of testing sites that leverage to WCAG standards.