Contrast checker
Check in seconds whether your color combination meets the WCAG thresholds for text and UI elements — with a concrete color suggestion when it falls short.
Free · No sign-up · Colors never leave your browser
Contrast 7.47:1. AA normal text: Pass. AAA normal text: Pass.
WCAG checks
- AA — normal textmin. 4.5:1 · WCAG 1.4.3Pass
- AA — large textmin. 3:1 · WCAG 1.4.3Pass
- AAA — normal textmin. 7:1 · WCAG 1.4.6Pass
- AAA — large textmin. 4.5:1 · WCAG 1.4.6Pass
- UI components & graphicsmin. 3:1 · WCAG 1.4.11Pass
Large text means: 24 px and up, or roughly 18.7 px when bold.
Preview
The thresholds, explained briefly
WCAG measures contrast as the luminance ratio of two colors — from 1:1 (identical) to 21:1 (black on white).
The required level for body text. Applies to all text below 24 px (or 18.7 px bold) — including links, labels and placeholders.
For large text from 24 px, and for controls and meaningful graphics: icons, chart lines, input borders.
The enhanced level for normal text (large text: 4.5:1). Not required by the EAA, but worthwhile for long-form reading and low-vision audiences.
For companies covered by the European Accessibility Act, WCAG 2.1 AA via EN 301 549 is the binding benchmark — and contrast is among the most commonly failed criteria. What the German BFSG specifically requires →
Typical contrast traps
- Light gray text on white: popular values like #999999 (2.8:1) look elegant but fall well short of the required 4.5:1.
- Text on photos and gradients: contrast must hold at the worst spot, not on average — without a darkening overlay, almost every image-text combination fails.
- Form placeholder text: the placeholder is text too and needs 4.5:1 — browser defaults are often below that.
- White type on signal and brand colors: yellow, orange and light greens rarely reach 4.5:1 with white — dark type is almost always the right call there.
- Forgotten focus rings and icons: non-text elements like focus indicators, icon buttons and input borders need 3:1 against their surroundings (WCAG 1.4.11).
Contrast is just one of 100+ checks
The free scan checks your whole website against WCAG 2.1 and the European Accessibility Act — score, all findings and a PDF report in under 60 seconds.
Frequently asked questions about color contrast
What contrast does WCAG require?
For conformance level AA: at least 4.5:1 for normal text and 3:1 for large text (from 24 px, or 18.7 px bold). Controls and meaningful graphics need 3:1. The stricter AAA level requires 7:1 for normal text.
Do the contrast thresholds apply under the European Accessibility Act?
Yes. The EAA (and the German BFSG implementing it) points to WCAG 2.1 AA via the European standard EN 301 549 — which makes the contrast requirements 1.4.3 and 1.4.11 legally binding for covered companies.
How is the contrast ratio calculated?
From the relative luminance of both colors using the WCAG formula: (L1 + 0.05) divided by (L2 + 0.05). The scale runs from 1:1 for identical colors to 21:1 for black on white. This tool uses exactly that formula.
Are there exceptions to the contrast requirement?
Yes: logos and brand marks, purely decorative text, inactive (disabled) controls, and text that is an incidental part of a photo are exempt from 1.4.3. Everything else has to meet the thresholds.
Is good contrast enough to make my website accessible?
No. Contrast is one of 100+ criteria — alternative text, keyboard operation, form labels and structure matter too. The free website scan with PDF report gives you the full picture.