Color Contrast
WCAG 2.1 contrast ratio between two colors. Pass/fail for AA and AAA at normal and large text sizes.
About Color Contrast
Color Contrast measures the WCAG 2.1 contrast ratio between a foreground and a background color and tells you, plainly, whether the pair passes AA and AAA for both normal and large text. It's the quick check every designer and developer needs before shipping text that has to be legible to everyone. It computes the ratio in your browser and returns a clear pass/fail report.
- Category
- inspect
- Input
- Accepts: */*.
- Output
- Outputs: application/json.
- Cost
- Free, runs in your browser
- Memory
- low
Common uses
- Verify body-text color against a background hits the 4.5:1 AA threshold before launch
- Check whether a lighter brand accent is legible enough for large headings
- Audit a button's label-on-fill contrast for an accessibility review
- Compare two palette options and pick the one that clears AAA for body copy
- Document the exact contrast ratio for a VPAT or accessibility statement
- Catch a low-contrast link or placeholder color before a QA pass flags it
Frequently asked questions
Which standard does it use?
WCAG 2.1 contrast ratio, with pass/fail evaluated against the AA and AAA thresholds.
Does it distinguish normal and large text?
Yes — large text has a lower required ratio, so results are reported separately for normal and large sizes.
What color formats can I enter?
Standard color values for the two colors being compared; the tool returns the computed ratio and pass/fail flags as JSON.
Is anything sent to a server?
No. The contrast ratio is calculated entirely in your browser.
What ratios count as passing?
AA needs 4.5:1 for normal text and 3:1 for large; AAA needs 7:1 and 4.5:1 respectively — the report tells you which thresholds each pair clears.
Keywords
- color
- contrast
- wcag
- accessibility
- a11y
- aa
- aaa
- ratio
- legibility
- text