Contrast Ratio – Definition, WCAG Values and Checking for Accessible Websites
The contrast ratio describes the measurable difference in brightness between two colours – typically between text content and its background. The higher the value, the greater the contrast and the easier the content is to read on screen. For accessibility, the contrast ratio is one of the most important and most frequently checked criteria – a poor ratio makes text unreadable for millions of people.
People most affected include those with colour blindness or red-green colour blindness: for them, low-contrast colours may be entirely indistinguishable. On poorly lit screens or in bright sunlight, a sufficient contrast ratio becomes a prerequisite for readability – regardless of any disability.
The WCAG set binding minimum values. Under the European Accessibility Act (EAA), WCAG 2.1 Level AA is legally mandatory for businesses across the EU. The contrast ratio is one of the first criteria checked in any WCAG audit.
Contrast Ratio at a Glance
- Definition: Measurable brightness difference between two colours, expressed as a ratio (e.g. 4.5:1)
- WCAG AA (text): Minimum 4.5:1 for normal text, 3:1 for large text (18pt+ / 14pt+ bold)
- WCAG AA (non-text): Minimum 3:1 for UI elements, icons and informative graphics
- WCAG AAA (text): Minimum 7:1 for normal text, 4.5:1 for large text
- Maximum: 21:1 – black (#000000) on white (#ffffff)
How Is the Contrast Ratio Calculated?
The contrast ratio is based on relative luminance – the perceived brightness value of a colour. The formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker colour. Luminance is calculated from a colour's RGB values after gamma correction, which aligns the calculation with human brightness perception.
In practice, designers and developers do not need to apply this formula manually. The SiteCockpit Contrast Checker calculates the contrast ratio of two colours directly in the browser and shows whether the value meets WCAG requirements at Level A, AA or AAA.
WCAG Requirements Compared: A, AA and AAA
The WCAG differentiate contrast requirements by text size and conformance level. The comparison shows that requirements increase significantly with each level – and that large text requires less contrast because it remains legible at a lower ratio.
- Level A (1.4.1): Colour must not be the only means of conveying information – no minimum contrast value
- Level AA (1.4.3): 4.5:1 normal text / 3:1 large text – legal minimum requirement
- Level AA (1.4.11): 3:1 for non-text content – buttons, icons, form fields
- Level AAA (1.4.6): 7:1 normal text / 4.5:1 large text – highest accessibility
- Exceptions: Decorative elements, inactive UI components and logotypes are exempt
Contrast Ratio for Images and Non-Text Content
Since WCAG 2.1, the contrast ratio applies beyond text. Criterion 1.4.11 (Non-text Contrast, Level AA) requires a minimum of 3:1 for all visual information necessary to understand an image, graphic or UI component. A chart whose lines barely stand out from the background, or a button with no visible border, violates this criterion.
Purely decorative images – those carrying no informational value – are exempt from contrast requirements. The key question is: would removing the element cause a loss of information? If yes, WCAG 1.4.11 applies.
Common Contrast Ratio Errors in Practice
Insufficient contrast is one of the most frequently identified accessibility failures – because it is easily overlooked in the design phase. Light grey text on white backgrounds, subtle placeholder text in form fields or understated icon colours look aesthetically pleasing but regularly fall below the WCAG minimum.
- Light grey text: #999999 on white yields only 2.85:1 – well below the 4.5:1 minimum
- Placeholder text: Often set with very low contrast – yet still conveys information
- Coloured links without underline: If colour is the only distinguishing feature, 3:1 contrast to body text is required
- Text on image backgrounds: Contrast varies by image area – difficult to check universally
- Focus indicators: Visible keyboard focus must also meet 3:1 contrast against the background
SiteCockpit Solution
Contrast Checker: Check Your Contrast Ratio Instantly
The SiteCockpit Contrast Checker checks the contrast ratio of two colours immediately and for free – including whether the value meets WCAG requirements at Level AA and AAA. For a comprehensive audit of your entire website, easyMonitoring automatically scans all pages for insufficient contrast and maps findings to the relevant WCAG criteria.
Open Contrast Checker →Frequently Asked Questions about Contrast Ratio
What is a good contrast ratio for websites?
For legal compliance under the EAA, 4.5:1 for normal text is the minimum (WCAG AA). A value of 7:1 or higher is recommended, ensuring sufficient readability in poor lighting conditions and for people with visual impairments.
Does the contrast ratio apply to buttons and icons too?
Yes. WCAG 1.4.11 (Non-text Contrast, Level AA) requires at least 3:1 for UI components such as buttons, checkboxes, form fields and informative icons. Purely decorative elements are exempt.
How do I check the contrast ratio on my website?
The SiteCockpit Contrast Checker checks individual colour combinations directly in the browser. For a full website audit, easyMonitoring automatically scans all pages for contrast violations and maps results to WCAG criteria.
Is white text on a coloured background always problematic?
Not necessarily. White text (#ffffff) on a deep blue (#1A56DB) yields approximately 4.6:1 – just sufficient for WCAG AA. What matters is the actual contrast value, not the colour combination itself. A contrast checker gives an instant answer.
Check the Contrast on Your Website Now
With the SiteCockpit Contrast Checker and easyMonitoring, you can check contrast ratios individually or across your entire website – with actionable guidance for WCAG-compliant implementation.
Try for free