Contrast Checker

Check WCAG AA/AAA contrast ratio for accessibility

Text color

Background

The quick brown fox

Sample text in normal size — check legibility here.

What is a contrast checker?

A contrast checker measures how distinct two colors look to a human eye and grades that distinctness against the Web Content Accessibility Guidelines (WCAG). This tool calculates the contrast ratio between any pair of colors using the WCAG 2.1 relative luminance formula (the same one used by browsers, screen readers, and accessibility audits) and reports whether the combination meets the WCAG AA or AAA thresholds for body text, large text, and non-text user-interface elements. Results update live as you adjust the colors, with a side-by-side preview so you can see the impact at the same time as the number.

Contrast ratios run from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). The ratio is independent of which color is in the foreground — black on white reads the same as white on black. Two thresholds are defined for body text in WCAG: 4.5:1 for AA and 7:1 for AAA. Large text (18pt or 14pt bold and above) gets a relaxed threshold because larger letterforms are easier to discriminate at low contrast: 3:1 for AA and 4.5:1 for AAA. WCAG 2.1 added a third threshold of 3:1 for non-text elements — UI components, focus indicators, meaningful icons, and form-control borders.

Sufficient color contrast is a baseline accessibility requirement. Roughly one in twelve men and one in two hundred women has some form of color-vision deficiency; many more people have age-related macular degeneration, glaucoma, cataracts, or simply read screens in bright sunlight. Designs that pass WCAG AA contrast are legible to nearly all of these readers without modification. AA is also the legal requirement under the European Accessibility Act (EAA), the US Section 508 standards, the UK Equality Act, and the WCAG-derived rules in most other jurisdictions — so checking contrast is not only a craft concern but a compliance one.

WCAG contrast levels in detail

WCAG defines four named thresholds for text plus a separate threshold for non-text UI. Each one applies in a specific context. The right one to design against depends on the size of the text and how much accessibility headroom your project needs.

AA Normal Text

4.5 : 1

The minimum contrast ratio for body text smaller than 18pt (or 14pt bold). This is the floor for all text on a public-facing website that wants to claim WCAG conformance. Success criterion 1.4.3 Contrast (Minimum). Roughly equivalent to mid-grey text (#767676) on white, or pure white on a slightly off-black (#595959).

AA Large Text

3 : 1

Large text gets a relaxed threshold because the larger letter shapes are easier to read at low contrast. "Large" in WCAG means at least 18pt (about 24px in CSS) or 14pt bold (about 19px bold). The 3:1 ratio is also the threshold for non-text elements like buttons, focus rings, form-control borders, and meaningful icons.

AAA Normal Text

7 : 1

The enhanced contrast level — success criterion 1.4.6. Recommended for sites where readability is critical (long-form reading, government services, educational platforms, medical interfaces) and for users with low vision. Few color systems offer many AAA-passing combinations, so AAA usually constrains the palette more than AA.

AAA Large Text

4.5 : 1

The enhanced threshold for text 18pt or 14pt bold and above. Numerically equal to AA Normal — meaning that a color pair which barely passes AA for body text passes AAA for headings. Designers often pick a single 4.5:1 pair to use for both small body text (AA) and large headings (AAA) for a consistent feel.

Non-text UI elements

3 : 1

WCAG 2.1 added success criterion 1.4.11 Non-text Contrast: any UI component or graphical object that conveys information must have a 3:1 contrast against its surroundings. That covers active form-field borders, focus indicators, icons that are not purely decorative, charts and graphs, and the visual states (hover, pressed, disabled active) of interactive controls. Disabled controls are explicitly exempt.

Exempt cases

no minimum

WCAG explicitly exempts logotypes, decorative text that conveys no information, incidental text in photographs, and text inside disabled controls. You still should consider readability for those — but they do not count against an AA or AAA conformance claim.

WCAG 3 / APCA

in draft

A successor metric, the Accessible Perceptual Contrast Algorithm (APCA), is in draft for WCAG 3. APCA scores in Lc values (lightness contrast) on a perceptual scale rather than a physical luminance ratio, and accounts for font weight and size more directly. It is not yet a published standard — for legal compliance and audits in 2026 you should still target WCAG 2.1 / 2.2 AA. APCA is a useful second opinion for hard-to-judge dark-mode palettes.

Required contrast by element type

The threshold that applies depends on what the color is used for. The table below summarises the WCAG-required minimums by element type at the AA and AAA levels.

Element	AA minimum	AAA minimum
Body text below 18pt (or 14pt bold)	4.5 : 1	7 : 1
Text 18pt or 14pt bold and above	3 : 1	4.5 : 1
Bold headings (most weights of 14pt+)	3 : 1	4.5 : 1
Buttons and active form-control borders	3 : 1	n/a
Focus indicators	3 : 1	n/a
Icons that convey meaning	3 : 1	n/a
Charts, graphs, data visualisations	3 : 1	n/a
Placeholder text in form fields	4.5 : 1	7 : 1
Link text against surrounding text	3 : 1	4.5 : 1
Disabled controls (inactive UI)	exempt	exempt
Logotypes	exempt	exempt
Decorative text (no information)	exempt	exempt
Incidental text in images / photos	exempt	exempt

How the contrast ratio is calculated

The WCAG contrast ratio is a function of relative luminance — a perception-weighted measure of how much light each color reflects. Each sRGB channel value (0–255) is normalised to 0–1, then transformed through the sRGB gamma curve to a linear-light value: roughly ((c/255 + 0.055) / 1.055)^2.4 for values above 0.04045, and a simple linear formula for darker values. The three linearised channels are weighted by human eye sensitivity — 0.2126·R + 0.7152·G + 0.0722·B — to produce a single luminance number between 0 (black) and 1 (white). The ratio between the lighter and darker color is then (L1 + 0.05) / (L2 + 0.05). The 0.05 offset accounts for ambient screen reflectance: even a pure-black pixel reflects a small amount of light, so the formula avoids dividing by zero and matches measured contrast more closely.

Frequently asked questions

What's the difference between WCAG AA and AAA?

AA requires 4.5:1 for normal text and 3:1 for large text — the practical minimum for compliance, and the level required by most accessibility laws. AAA is stricter at 7:1 for normal text and 4.5:1 for large text — the gold standard, recommended for long-form reading interfaces, government and healthcare sites, and any product targeting users with low vision. Most of the web targets AA; a thoughtful subset goes AAA on body copy.

What counts as 'large text'?

WCAG defines large text as 18pt and above, or 14pt bold and above. That works out to roughly 24px (or 19px bold) when text is set with a 1:1 px-to-pt ratio in CSS. The relaxed threshold is justified by the fact that bigger, heavier letterforms are easier to read at lower contrast — but the cut-offs are sharp, not graduated, so 17.5pt regular text falls under the body-text threshold (4.5:1 for AA).

Is checking contrast a legal requirement?

Effectively yes, in most jurisdictions. WCAG 2.1 AA is the technical standard cited by the EU Web Accessibility Directive (public sector), the European Accessibility Act 2025 (private sector), the UK Equality Act, US Section 508, and Australia's DDA. Failing AA contrast is one of the easiest accessibility issues to detect in an audit, and one of the most commonly cited in legal complaints — automated tools find it before humans even start testing.

Is the contrast ratio symmetric — does dark-on-light equal light-on-dark?

Yes. The WCAG formula compares the relative luminance of the two colors as a ratio, with the lighter color always in the numerator. #000 on #fff and #fff on #000 both score the maximum 21:1. This makes the metric agnostic to whether your design is light-mode or dark-mode.

Why do my charts and icons need 3:1 contrast?

WCAG 2.1 success criterion 1.4.11 Non-text Contrast requires graphical elements that convey information — icons, chart bars, focus rings, the visual borders of form controls — to maintain at least 3:1 against their surroundings. The reasoning is the same as for large text: enough contrast to perceive the shape, but the shape itself does the heavy lifting of conveying meaning. Decorative icons, disabled controls, and logos are exempt.

Does the tool account for color blindness?

Indirectly. The WCAG luminance formula weights green more than red and blue — closely matching the cone-cell sensitivities of human vision — so a color pair that passes WCAG contrast will usually still be discriminable to someone with red-green color blindness, because they rely heavily on the same lightness cue. For a direct check, use the colour-blindness simulator and verify that interactive states are still distinguishable in the simulated views.

What is APCA, and should I use it instead of WCAG 2.1?

The Accessible Perceptual Contrast Algorithm is a successor metric being drafted for WCAG 3. It uses a perceptual lightness scale (rather than luminance ratio) and produces an Lc score that takes font weight and size into account. APCA is more accurate for hard cases — particularly mid-tone palettes and dark mode — but it is not yet a finalised standard. For 2026, target WCAG 2.1 / 2.2 AA for compliance and use APCA as a second opinion when you have a borderline case.

Is the calculation done locally?

Yes. Color-picker input, the luminance computation, and the WCAG threshold checks all run in your browser using JavaScript. No color values are sent to any server, and the tool works offline once the page has loaded.