EN
Deutsch
Français
Español
ItalianoFree contrast checker based on WCAG 2.2
Is your color contrast good enough? Checked in a second.
Low contrast is the single most common accessibility failure. Test two colors against WCAG 2.2 here, or scan your whole website for contrast problems right away.
This is what your heading looks like
And this is how normal body text reads in this combination. Can all your visitors read it effortlessly?
Automated measurement based on the WCAG formula, without warranty. It replaces neither a manual review by professionals nor legal advice.
Scan your whole website for contrast failures
Single color pairs are the start. The scan finds every spot with insufficient contrast on up to 10 pages, on desktop and smartphone, with the exact color values.
Takes about two minutes
What color contrast means and why it matters
Contrast decides whether your content is readable for all visitors. And it is one of the few aspects of accessibility that can be measured precisely.
Color contrast describes the difference in brightness between two colors, for example between your text and the background behind it. The Web Content Accessibility Guidelines (WCAG) measure it as a contrast ratio on a scale from 1:1 (a color on the identical color) to 21:1 (black on white). The calculation is based on the relative luminance of both colors, in other words how bright a color appears to the human eye.
Why it counts: millions of people live with a visual impairment, and around four percent of the population have a color vision deficiency alone. Add everyday life on top, because from your mid-forties the eye's contrast sensitivity measurably declines. What looks elegant to a young eye on a calibrated monitor is simply no longer legible for many visitors.
At the same time, low contrast is the most common accessibility failure on the entire web: large-scale surveys such as the WebAIM Million study find it on roughly four out of five home pages, year after year. The cause is rarely bad intent but a design trend, because light grey text on a white background looks modern and calm, yet regularly fails the WCAG benchmark.
Finally, contrast is a legal matter: the European Accessibility Act and national laws such as Germany's BFSG require WCAG Level AA compliance via the European standard EN 301 549, including the contrast rules. For companies in scope, text that is too pale is no longer a cosmetic issue but a measurable violation.
What the contrast ratio means
WCAG measures contrast as the ratio between the luminance of text and background color, from 1:1 (no contrast) to 21:1 (black on white).
4.5:1 for normal text (AA)
The mandatory level for body text under WCAG 1.4.3, and therefore the benchmark of the European Accessibility Act. Grey text on white fails here most often.
3:1 for large text and UI (AA)
From 24 px (or 18.5 px bold), 3:1 is enough. The same ratio applies under WCAG 1.4.11 to UI components such as button borders, icons and form fields.
7:1 for the highest bar (AAA)
The level for people with more severe low vision. Not legally required, but a good target for high-importance text.
What people forget
Contrast also applies to text on images, form placeholders, links in body text and the focus outline. Exactly the spots the website scan finds.
Who low contrast shuts out
Contrast failures don't just affect a small niche group. They make your website exhausting or unusable for a surprisingly large share of your visitors.
People with low vision
Cataracts, retinal conditions or strong refractive errors significantly reduce contrast sensitivity. Pale text then simply blurs into the background.
People with color vision deficiency
Roughly one in twelve men can barely tell red and green apart. If a link differs from body text only by its hue, it is invisible to these visitors.
Older visitors
The eye's lens clouds over the years and lets less light through. From around age 60, the eye needs several times more contrast than a twenty-year-old's.
Everyone browsing outdoors
Sunlight on a smartphone screen turns weak contrast into uniform grey. Someone who wants to order on the go and can't read anything will order elsewhere.
Users of basic displays
Older monitors, projectors and budget panels render colors flatter than a designer's MacBook. A contrast at the lower limit finally tips into unreadable there.
Anyone who is tired
In the evening, in dim light or after eight hours of screen work, every eye's contrast performance drops. Good contrast is comfort for everyone, not just an obligation for a few.
The five most common contrast failures
Across thousands of scans we keep seeing the same patterns. Check your website specifically for these five classics.
- 1
Light grey text on a white background
The evergreen: body text in #999999 or lighter looks subtle but only reaches around 2.8:1 on white instead of the required 4.5:1. Dates, image captions and footer text are hit most often.
- 2
Placeholder text in forms
The grey example text inside an input field is real content as soon as it is the only label. Default placeholders in many frameworks sit well below 4.5:1 and leave visitors guessing what belongs in the field.
- 3
White type on photos and gradients
On the dark area of the image the contrast passes, on the bright area it no longer does. Since images shift with every screen width, text on images needs a darkening layer or a solid color surface behind it.
- 4
Links distinguished by color alone
A pale blue link inside grey body text needs 3:1 contrast against the surrounding text plus a second cue such as an underline. Otherwise many visitors never find your most important click targets.
- 5
Pale buttons, icons and focus outlines
Since WCAG 2.1, graphical UI components also need 3:1: button borders, form field outlines, icons and the outline that shows keyboard users where they currently are. Exactly the spots design reviews miss most often.
Improve contrast without sacrificing your design
Accessible contrast doesn't mean black on white. Small, targeted adjustments are usually enough.
Darken colors selectively
Often just one step is missing: a too-light grey becomes #595959, the pale brand blue gets a darker variant for text. The palette keeps its character, and the checker above shows instantly when it passes.
Use font size as leverage
Large text from 24 px (or 18.5 px bold) only needs 3:1 instead of 4.5:1. A slightly larger or bolder font can make a lighter color legal, especially for headings on colored surfaces.
Never rely on color alone
Underline links, mark errors with an icon and text as well, don't flag required fields with red only. Where a second cue exists, comprehension no longer depends on color vision.
Check every state
Hover, focus, visited links and disabled elements have their own colors that style guides love to forget. Check each state color individually, the scan measures them in the rendered state.
How to check your contrast properly
Four steps from a single color to a permanently clean website.
- 1
Test a color pair
Enter text and background color above. The ratio and all WCAG levels are calculated instantly, with a live preview.
- 2
Scan your website
The scan checks up to 10 pages and finds every spot with insufficient contrast, including the measured color values.
- 3
Fix using the report
The report shows every affected element with its current and required value. Adjust colors, rescan, tick it off.
- 4
Stay safe permanently
With monitoring your website is rechecked regularly. If a pale grey sneaks in during a redesign, you'll know immediately.
The legal framework: from standard to obligation
Four sets of rules interlock and turn a design recommendation into a legal requirement.
WCAG 2.2
The international W3C standard. Criterion 1.4.3 requires 4.5:1 for normal text (Level AA), 1.4.6 requires 7:1 (Level AAA), and 1.4.11 requires 3:1 for UI components and graphics.
EN 301 549
The European standard for accessible IT. It adopts WCAG Level AA as the binding benchmark and is the technical yardstick behind all EU accessibility legislation.
European Accessibility Act
EU Directive 2019/882, in force for many websites, shops and apps since 28 June 2025. It ensures comparable requirements across all EU countries, so anyone selling across Europe cannot get around Level AA.
National laws like the BFSG
Each member state transposes the directive, in Germany as the BFSG with fines of up to 100,000 euros. Contrast is the easiest violation to prove: a single measurement is enough.
Where does your website stand?
The free scan measures every contrast on your website and shows how far you are from Level AA.
What automated measurement can and cannot do
The scan measures every machine-checkable case precisely: text on solid backgrounds, links, buttons, form fields and icons, each with the actually rendered color values on desktop and smartphone. That covers the vast majority of all contrast failures.
Text on photos, videos and color gradients cannot be judged unambiguously by a machine because the background differs at every point. The report marks such spots for manual review, so nothing silently counts as passed that a human eye should still look at.
One more note: the assessments on this page, for example regarding the European Accessibility Act, are non-binding technical initial assessments and not legal advice. For binding statements about your obligations, please consult a lawyer.
Frequently asked questions about color contrast
What contrast ratio does WCAG require?
At least 4.5:1 for normal text and at least 3:1 for large text (from 24 px, or 18.5 px bold) under WCAG 1.4.3, Level AA. Graphical UI components also need 3:1 (WCAG 1.4.11). Level AAA requires 7:1 for normal text.
Is checking contrast legally required?
The European Accessibility Act references the WCAG contrast rules at Level AA via EN 301 549. Insufficient contrast is therefore a genuine legal violation for affected companies, and one of the easiest to measure.
How is the contrast ratio calculated?
From the relative luminance of both colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The checker above uses exactly this calculation, the same one used by regulators' tools.
What counts as large text?
Under WCAG, text from 18 point (around 24 px) counts as large, bold text already from 14 point (around 18.5 px). Large text only needs a 3:1 ratio at Level AA. The two chip rows in the checker above show both evaluations side by side.
Are there exceptions to the contrast requirement?
Yes: logos and brand names, purely decorative text and graphics, and disabled UI elements are exempt from the contrast requirements. But beware of placeholder text in forms, which counts as real content and needs the full 4.5:1.
My design looks fine, isn't that enough?
What looks fine to designers with typical vision can be unreadable for people with low vision, around four percent of the population have a color vision deficiency alone. That's why the measurable ratio counts, not the impression.
Does a contrast mode or an overlay widget help?
A switchable contrast mode is a sensible addition, but it doesn't replace the obligation that the default view meets Level AA. WCAG evaluates what all visitors see without an extra click. Properly chosen colors at the source are always the first step.
Does the website scan find all contrast problems?
It finds everything that can be measured automatically: text on solid backgrounds, links, buttons, form fields. Text on photos or gradients also needs a human eye, and the report marks those spots for manual review.
Check your contrast before your customers do.
Test a color pair above, scan your website, get a report with exact color values. Free and with nothing to install.
To the contrast checker