Color Contrast Checker
Check text contrast against WCAG AA and AAA accessibility levels.
Large text sample
Normal body text at 16 pixels — the size most of your content will actually use.
Small print at 14 pixels.
7.73:1
Contrast ratio
AA — normal text
Needs 4.5:1
AA — large text (18.66px bold / 24px)
Needs 3:1
AAA — normal text
Needs 7:1
AAA — large text
Needs 4.5:1
Non-text elements (icons, borders)
Needs 3:1
About Color Contrast Checker
Contrast ratio is the most testable accessibility requirement there is, and low-contrast text is one of the most common failures found in audits.
This checker computes the WCAG relative luminance ratio between your foreground and background, shows pass or fail for each conformance level and text size, and previews real text at both sizes.
How Color Contrast Checker works in your browser
The contrast ratio is computed exactly as WCAG 2.1 defines it. Each colour’s sRGB channels are linearised by reversing the gamma curve, combined into relative luminance with the coefficients 0.2126 R, 0.7152 G and 0.0722 B — weighted for the eye’s differing sensitivity to each — and the two luminances are compared as (lighter + 0.05) / (darker + 0.05).
The result runs from 1:1 for identical colours to 21:1 for black on white. AA requires 4.5:1 for body text and 3:1 for large text, which WCAG defines as 18pt, or 14pt bold. AAA requires 7:1 and 4.5:1 respectively.
Try black (#000000) on white (#ffffff): 21:1. Grey #777777 on white is about 4.48:1 and fails normal-text AA; do not round it up to a pass. Check the actual composited background when opacity, gradients or images are involved. A passing ratio is a floor, not a guarantee. The formula does not model colour blindness, screen glare, or the way very thin fonts read lighter than their colour value suggests. Text that passes at exactly 4.5:1 in a hairline weight is still hard to read.
When to use it
- Checking a colour pair against WCAG AA before it ships into a design system.
- Finding the minimum lightness adjustment that brings existing brand colours into compliance.
- Verifying that a dark-mode palette passes as well as its light counterpart.
- Documenting accessibility conformance for an audit or a procurement requirement.
Frequently asked questions
What ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
At least 18.66 pixels bold, or 24 pixels regular.
Does contrast apply to icons and borders?
Yes. Meaningful non-text elements such as icons and input borders need at least 3:1 under WCAG 2.1.