Color Contrast Checker,
WCAG AA & AAA accessibility.

WCAG Guide

Colour contrast and web accessibility: why it matters and how to achieve it.

What is colour contrast?

Colour contrast in web design refers to the difference in luminance (perceived brightness) between a foreground element — typically text — and its background. When contrast is insufficient, text becomes difficult or impossible to read, particularly for users with low vision, colour blindness, ageing eyes, or anyone viewing a screen in bright ambient light.

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), define minimum contrast ratios that websites must meet to be considered accessible. These guidelines are referenced in legislation across many countries, including the Americans with Disabilities Act (ADA), the UK Equality Act, and the EU Web Accessibility Directive.

How contrast ratio is calculated

The contrast ratio is calculated from the relative luminanceof the two colours. Relative luminance is a measure of the perceived brightness of a colour, adjusted for the non-linear way human vision perceives light. The formula is:

Where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance is derived from linearised sRGB values using the formula specified in WCAG 2.1, Appendix A.

The contrast ratio ranges from 1:1 (no contrast at all — two identical colours) to 21:1 (maximum contrast — pure black on pure white or vice versa).

WCAG AA vs WCAG AAA

WCAG defines two levels of conformance for colour contrast:

• WCAG AA (Level 2): The minimum standard required by most accessibility guidelines and legislation. Requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text.
• WCAG AAA (Level 3): The enhanced standard for maximum accessibility. Requires at least 7:1 for normal text and 4.5:1 for large text. AAA is recommended but not always required.

Most designers target WCAG AA as the baseline, with AAA applied for critical UI elements like body copy, navigation labels, and error messages.

What counts as "large text"?

WCAG defines large text as text that is at least 18 point (24 px) in regular weight, or at least 14 point (approximately 18.67 px) in bold weight. Large text receives a lower contrast requirement because larger letterforms are easier to read even at reduced contrast.

In practice: headings are almost always "large text". Body copy at 16 px normal weight is "normal text". Navigation items, labels, captions, and UI controls are typically "normal text" unless you have explicitly set them to a large bold style.

Common causes of contrast failures

• Light grey text on white: A very common pattern in "minimal" design that almost universally fails WCAG AA. Even #767676 on white (#FFFFFF) only just passes at 4.54:1.
• Coloured text on coloured backgrounds: Brand colour combinations that look visually striking — orange on yellow, purple on blue — frequently fail because similar-hue colours share similar luminance.
• Placeholder text: HTML placeholder text is often styled at around 40% opacity or in light grey, which almost always fails. WCAG applies to placeholder text if it conveys information.
• Low-contrast focus indicators: Interactive elements need visible focus outlines for keyboard users. WCAG 2.2 introduced specific contrast requirements for focus indicators.

Tips for choosing accessible colour pairs

The most reliable approach to accessible colour is to design with contrast in mind from the start, not as an afterthought:

• Dark text on light backgrounds (or light text on dark) almost always passes. Black on white gives 21:1 — the maximum possible contrast.
• If your brand colour is a mid-tone (e.g. a medium blue, red, or green), test it carefully. Use it on white or very dark backgrounds, not on medium-toned backgrounds.
• Colour alone must never be the only way information is conveyed. An error state that turns a field border red, but provides no other visual indicator, is inaccessible to colour-blind users regardless of contrast ratio.
• At AA for normal text, #767676 on white is the lightest grey that barely passes (4.54:1). Any lighter — such as #888 or #999 — fails.
• For dark backgrounds: pure white (#FFFFFF) is safe on any background darker than about #595959. On a #333333 background, white gives 10.4:1.

Beyond contrast: additional accessibility considerations

Contrast ratio is one metric, not the full picture of accessible typography:

• Font size: Even high-contrast text is hard to read at 8 px. WCAG does not specify a minimum font size, but 16 px for body copy is a widely accepted baseline.
• Font weight and style: Light-weight fonts (100–300) reduce effective readability even when colour contrast is technically sufficient. Prefer 400 weight or above for body text.
• Line length and spacing: WCAG 1.4.12 (Text Spacing) requires that no content or functionality is lost when letter-spacing, word-spacing, line height, and paragraph spacing are increased.
• Background patterns and images: Text over textured or photographic backgrounds cannot be tested with this tool. Use a solid overlay, text shadow, or avoid text-over-image entirely.

Disclaimer

This tool implements the WCAG 2.1 relative luminance and contrast ratio formula as specified in WCAG 2.1, Success Criteria 1.4.3 and 1.4.6. Results are mathematically accurate for solid-colour combinations. They do not account for text over images, gradients, semi-transparent elements, or anti-aliasing effects. Always verify critical colour decisions with manual testing and assistive technology.