Contrast checker
Enter two colours or pick them from a screenshot. The WCAG score appears instantly.
AA requires 4.5:1 (normal text) and 3:1 (large text and UI).
Text colour #576cda gets you to AA (4.5:1). Click to apply.
Large heading (24px)
This is what your visitor reads
This is normal 16 pixel text. Large text is 18.66 pixels bold or 24 pixels regular and may use a lower ratio.
ButtonUpload a screenshot or design and click inside the image to pick a colour.
Why contrast matters
Contrast is the difference in brightness between text and background. Too little of it and your text becomes unreadable: in sunlight on a phone, on a cheap monitor, for someone with a mild visual impairment, or simply for anyone over 45. That is not an edge case. Roughly 1 in 12 men has some form of colour blindness, and almost everyone reads a page outdoors at some point.
For a site owner, poor contrast means two things: visitors don't read your offer, and buttons and forms get skipped. In conversion research we regularly see that a too-light grey label or a button with slightly too little contrast literally costs enquiries. Test your colours in the checker above and you'll see where you stand.
What WCAG actually requires
WCAG (Web Content Accessibility Guidelines) is the international standard. For contrast, level AA sets these thresholds:
| Element | Requirement (AA) | Requirement (AAA) |
|---|---|---|
| Normal text (< 18.66px bold or < 24px) | 4.5:1 | 7:1 |
| Large text (≥ 18.66px bold or ≥ 24px) | 3:1 | 4.5:1 |
| UI components, icons, input borders | 3:1 | — |
| Logos and purely decorative elements | no requirement | no requirement |
The ratio runs from 1:1 (identical, invisible) to 21:1 (black on white). AA is the level legislation and clients refer to. AAA is stricter and usually only mandatory for government services or audiences with many visual impairments.
Which sites are legally required to comply
Accessibility is no longer optional advice in Europe.
- Government and semi-public organisations in the Netherlands fall under the Temporary Decree on Digital Accessibility: WCAG 2.1 level AA, plus a mandatory accessibility statement.
- Companies with a webshop or digital service fall under the European Accessibility Act as of 28 June 2025. Think e-commerce, banking, transport, e-books and telecom.
- Micro-enterprises (fewer than 10 staff and under 2 million euro turnover) providing services are exempt, though customers and procurement teams will still ask.
- B2B suppliers get the requirement through tenders and procurement terms: large clients demand WCAG AA from their vendors.
In short: if you deliver a service to consumers online, or you work for the public sector, contrast is a requirement rather than a design preference. More background in our article on WCAG legislation.
How to use the checker
- Enter the text colour and background colour as hex codes, or pick them with the colour picker.
- Only have a screenshot or a design? Upload the image and click inside it to sample a colour. Use the toggle first to decide whether you're filling the text or the background colour.
- Read the ratio and the badges: per text size and per level you see whether it passes.
- Not reaching AA? Click "Apply" on the suggestion. We shift your text colour as little as possible until 4.5:1 is met, so your brand colour stays as close as it can.
Common mistakes
- Grey on white.
#999999on white only reaches 2.8:1. Popular in designs, hopeless for WCAG. - Text over a photo. The ratio changes per pixel. Use an overlay or a text block with a fixed background colour.
- Placeholder as label. Placeholders are usually light grey and disappear as you type. Use a real label.
- Brand colour as text colour. Many brand colours (yellow, light blue, mint) work fine as a surface, not as text. Use them as background with dark text on top.
- Forgetting disabled states and error messages. A red error message at 3:1 is read by nobody.
- Using colour alone to convey meaning. Add an icon or text next to red or green.
Contrast is one part of accessibility
A good contrast score doesn't mean your site is accessible. Also think about visible focus states for keyboard navigation, alt text, a logical heading structure, form labels, large enough tap targets and a site that works at 200% zoom. Contrast is simply the quickest thing to check and the most frequently wrong.
To see how your site does technically, a quick website scan is a good start, and PageSpeed Insights covers speed and Core Web Vitals.
How we help
We build sites and shops where accessibility lives in the design system rather than as an afterthought. In practice: colour tokens tested per combination, components with fixed text-on-background pairs, and a check at handover. Facing an audit, a tender or a complaint? We'll look at what's needed and what it costs.
Want to talk it through? Book an advisory call or message us via the contact page.
Questions about colour contrast and WCAG
What is a good contrast ratio?
WCAG level AA asks for at least 4.5:1 for normal text. For large text (from 18.66px bold or 24px) and for UI parts such as icons and input borders, 3:1 is enough. For AAA it is 7:1 for normal text and 4.5:1 for large text.
Is WCAG mandatory for my website?
Government and semi-public organisations in the Netherlands must meet WCAG 2.1 AA. Since 28 June 2025 many commercial digital services and webshops fall under the European Accessibility Act as well. Micro-enterprises are often exempt but still get the requirement through procurement terms and tenders.
Does the contrast requirement apply to logos and decoration?
No. Logos and purely decorative elements are exempt. Text inside an image is not exempt, and functional icons and form field borders must reach 3:1.
How do I test text on top of a photo?
The ratio differs per pixel, so measure the worst spot: upload a screenshot in the checker and click the lightest part of the background behind your text. For text over imagery, use an overlay or a solid text panel so the ratio becomes predictable.
Why does grey text so often fail?
Grey on white is popular in design, but #999999 only reaches 2.8:1 and #767676 sits exactly at 4.5:1. Anything lighter fails for normal text. Pick greys based on the measured ratio, not on feel.
Is a good contrast score enough for an accessible site?
No, contrast is one success criterion. You also need visible focus states, alt text, a logical heading structure, real form labels, large enough tap targets and a site that works at 200% zoom. Contrast is simply the fastest to check and the most commonly wrong.
Questions, or just want to spar?
We're happy to think along — call, email or drop by in the heart of Eindhoven.