Brand palettes ship with a hero blue, a muted gray for captions, a green for success states. Each pair looks fine on a slide. On a phone in sunlight, half of them fail WCAG before anyone opens a ticket.
Color accessibility starts with luminance, not taste. This page measures the gap between two hex values, maps the result to AA and AAA rows, then shows how eight color vision types read the same pair.
Vision previews on this page use simplified matrix approximations, not clinical simulation. A pair passing here still needs a label, icon, or pattern when red versus green carries meaning. Contrast alone never replaces redundant cues.
What the ratio number means
WCAG contrast is relative luminance between foreground and background. The formula compares the lighter value to the darker one, adds a small offset, and returns a ratio like 4.5:1 or 7:1. Higher is sharper. Lower washes out.
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA | 4.5:1 minimum | 3:1 minimum | 3:1 against adjacent colors |
| AAA | 7:1 minimum | 4.5:1 minimum | Same 3:1 for graphics |
Large text means 18px regular or 14px bold and up. Logos and inactive controls follow different rules. This checker focuses on body copy, headings, and button labels where failures show up most often.
Why the vision strip sits beside WCAG
Contrast ratio does not ask whether two hues look identical to someone with protanopia. A green success badge beside a red error badge might clear 4.5:1 against white while remaining indistinguishable for roughly 8% of men.
- Protanopia / Deuteranopia
- Red-green confusion. Status colors need shape or wording, not hue alone.
- Tritanopia
- Blue-yellow confusion. Cool accent on a warm background deserves a second check.
- Achromatopsia
- Full grayscale. Only luminance remains, so ratio and simulation should agree.
- Anomaly types
- Milder shifts than full blindness. The strip shows partial loss, not diagnosis.
Not the same page as the contrast checker
The Contrast Checker loads preset chips and renders normal versus large text samples side by side. Good for a quick pass on a marketing hero.
This page keeps color vision previews, alternative pair chips, CSS variable export, and a plain-text report in one panel. Pick the checker when you only need ratio plus AA/AAA. Stay here when the handoff includes simulation and export for a design review.
When AA is enough
Public sector sites in the EU often cite EN 301 549, which references WCAG 2.1 Level AA. Most product teams ship AA for body text and treat AAA as a stretch goal for long-form reading blocks.
- Ship at AA for dashboards, forms, tables, and dense UI where 7:1 would force washed-out grays.
- Push toward AAA on article body copy, help docs, and anywhere users read for minutes.
- Large text only when the ratio lands between 3:1 and 4.5:1. Bump weight or size before you ship.
Fixing a failing pair without starting over
The suggestions panel appears when the ratio drops below a threshold. Darken text on light backgrounds. Lighten text on dark backgrounds. The alternative chips rank six preset pairs from a neutral gray set so you see workable ratios without opening a spreadsheet.
Need to nudge one side while keeping brand hue? Run the failing hex through Darken Color or Lighten Color, paste the result back here, and re-check. Building a full palette first? Generate candidates in the Palette Generator, then validate each text/background slot on this page before handoff.
What the Report button exports
Report downloads a .txt summary: ratio, grade, hex pair, and four WCAG booleans. Not a PDF audit certificate. Not a legal attestation. Enough for a Slack thread or a Jira comment when a designer asks for proof before merge.
For deeper simulation with severity sliders and shareable URLs, open the Color Blindness Simulator. For a second opinion on ratio math alone, the Contrast Analyzer runs the same luminance formula with a different layout.
Reviewed August 2026. All math runs client-side. Hex values never leave your browser tab.
