Contrast Checker — Free WCAG AA & AAA Colour Accessibility Tool

Choose a foreground and background colour to instantly calculate your contrast ratio and see whether your combination passes WCAG 2.1 accessibility standards. Results cover all five compliance criteria — normal text AA, large text AA, normal text AAA, large text AAA, and UI components — with clear pass and fail indicators for each. If your colours fail, the auto-fix tool suggests the closest passing alternative without changing your chosen hue.

 

How to Use the Contrast Checker

Enter your foreground colour — the colour of your text or icon — using the colour picker or by typing a hex code directly into the input field. Enter your background colour the same way. The contrast ratio updates instantly, along with a five-criterion compliance grid showing exactly which WCAG standards your combination passes or fails.

If one or more criteria fail, check the auto-fix suggestion panel. The tool calculates the closest colour to your foreground that passes the selected criterion. Click Apply as Foreground to switch to the suggested colour instantly. Use the ⇄ Swap button to reverse the two colours and check the same pair in the opposite configuration.

What Is WCAG Contrast Ratio?

The Web Content Accessibility Guidelines (WCAG) define a mathematical formula for measuring the contrast between two colours — the ratio of their relative luminances. A ratio of 1:1 means the two colours are identical. A ratio of 21:1 is the theoretical maximum — pure black on pure white.

Relative luminance is a weighted measure of how much light a colour appears to emit, calibrated to how the human eye responds to different wavelengths. The eye is most sensitive to green light, moderately sensitive to red, and least sensitive to blue:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

R, G, and B are the linearised (gamma-corrected) values of each colour channel. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour. This tool uses the exact formula defined in WCAG 2.1 with no approximations.

WCAG 2.1 Compliance Levels

Criterion	Ratio	Applies to
AA — Normal Text	4.5:1	Body text under 18pt regular / 14pt bold
AA — Large Text	3:1	Text 18pt+ (24px+) or 14pt bold (≈18.67px)
AAA — Normal Text	7:1	Enhanced standard for critical body text
AAA — Large Text	4.5:1	Enhanced standard for headings and display text
UI Components	3:1	Icons, form borders, focus indicators, chart data

WCAG AA — Normal Text (4.5:1) is the most important threshold for most websites. It is required by the European Accessibility Act, ADA, EN 301 549, and the UK Equality Act 2010.

WCAG AAA — Normal Text (7:1) is not required for entire pages under current legislation, but is recommended for high-stakes content: medical information, legal text, financial data.

UI Components (3:1) — introduced in WCAG 2.1 — covers any non-text graphical element used to convey meaning: form input borders, icon outlines, focus rings. This is commonly overlooked and often the source of non-compliance in otherwise well-considered designs.

Why Contrast Matters

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. A larger proportion — roughly 1 in 4 adults — has some degree of reduced visual acuity that makes low-contrast text harder to read, particularly on screens in bright ambient light. Older adults are disproportionately affected: visual contrast sensitivity typically begins declining around age 40.

Beyond individual perception, environmental conditions affect everyone. A high-contrast pair that is perfectly readable in a dimly lit office can become difficult to parse on a phone screen in direct sunlight. Designing to WCAG AA provides a margin of safety that covers most real-world viewing conditions.

Common Contrast Mistakes

White text on mid-tone backgrounds. A bright brand blue like #007bff gives white text approximately 4.1:1 — failing normal text AA (4.5:1) while passing large text (3:1). Darkening to #0062cc typically pushes above 4.5:1 while preserving the visual impression.

Light grey placeholder text. #999 on white gives approximately 2.85:1 — below every WCAG threshold. #767676 on white gives exactly 4.5:1. Many designers are surprised to find how dark a “light grey” needs to be to pass.

Coloured text on coloured backgrounds. Orange on white typically gives around 3:1. Teal on white can be higher or lower depending on the exact value. Always check palette combinations, not just the obvious dark-on-white cases.

Focus indicators. WCAG 2.1 requires focus indicators to have at least 3:1 contrast against adjacent colours. Browser default focus rings are often insufficient, and custom brand-coloured focus styles frequently fail this check.

Applying Accessible Colours in CSS

The most maintainable approach is a token-based system where contrast compliance is verified at the token definition stage:

:root {
    /* Text tokens — all verified ≥ 4.5:1 against white */
    --color-text-base:  #212529; /* 16.07:1 — AAA */
    --color-text-muted: #6c757d; /* 4.52:1  — AA  */
    --color-text-link:  #0062cc; /* 5.91:1  — AA  */

    /* UI component tokens — verified ≥ 3:1 */
    --color-border:     #adb5bd; /* 3.02:1 on white */
    --color-focus:      #0062cc;
}

Documenting the contrast ratio in a comment next to each token creates a self-verifying token file — anyone modifying the token later can see the requirement the original value was chosen to meet.

Combine with the Colour Palette Generator. Once you have identified a compliant palette using this tool, use the Colour Palette Generator to build a full five-colour scheme from your compliant base colour, then re-check every intended text/background pairing.

Contrast in Design Systems

Building WCAG compliance into a design system requires checking contrast at the token level, not the component level. If your base colours are all verified at definition time, any component using those tokens is compliant by construction.

Dark mode. Colours that pass on light backgrounds often fail on dark ones, and vice versa. Each colour system variant needs its own contrast verification pass. A text token like --color-text-muted may be #6c757d in light mode (4.52:1 on white) and #9eabb5 in dark mode (4.55:1 on a dark background) — different values, same contrast requirement.

Automated testing. Tools such as axe-core, Lighthouse, and Pa11y check contrast ratios programmatically as part of a CI pipeline, catching regressions when token values change. This manual tool is best used during design and exploration; automated checking enforces compliance in production.

Frequently Asked Questions