WCAG colour contrast explained — the AA/AAA ratios, why they matter for accessibility, and how to check yours free.
Colour contrast is the difference in brightness between text and its background, measured as a ratio. WCAG (the web accessibility guidelines) require at least 4.5:1 for normal text (AA) and 3:1 for large text — with 7:1 for the stricter AAA level. Getting this right makes your site genuinely readable for everyone and keeps you within widely referenced accessibility standards. Here's everything you need to know.
What "Contrast Ratio" Actually Means
Contrast is expressed as a ratio ranging from 1:1 (no contrast at all — the two colours are identical, effectively invisible against each other) up to 21:1 (pure black against pure white, the maximum possible contrast). The higher the ratio, the easier text is to read against its background, which matters especially for people with low vision, ageing eyesight, or colour vision deficiencies, but genuinely benefits every reader in less-than-ideal viewing conditions — direct sunlight, a low-quality screen, or simple visual fatigue late in the day.
WCAG Thresholds ⚠️CHECK
| Level | Normal text | Large text (≥18pt / 14pt bold) |
|---|---|---|
| AA (standard) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Additionally, UI components (buttons, form field borders, icons) and meaningful graphics need at least 3:1 contrast against their adjacent colours, separate from the text-specific ratios above.
Why AA Is the Practical Baseline Most Sites Target
AA is the level most accessibility guidelines, legal frameworks, and organizational policies reference as the practical minimum standard, striking a workable balance between genuine readability and reasonable design flexibility. AAA is meaningfully stricter and harder to achieve across an entire site without significantly constraining colour choices, which is why it's commonly reserved for specific contexts where enhanced accessibility is a particular priority (certain government or public-service sites, content specifically for a low-vision audience) rather than treated as a universal requirement for every site and every element.
Why It Matters Beyond Just Compliance
- Accessibility — genuinely readable content for users with low vision, ageing eyesight, or colour blindness, who make up a meaningful share of any real audience, not an edge case.
- Legal considerations — many regions have accessibility regulations or guidelines that reference WCAG standards, making compliance a genuine legal consideration for many organizations, not just a nice-to-have.
- Usability for everyone — better readability in bright sunlight, on lower-quality screens, and simply for tired eyes late in a long session, regardless of any specific vision condition.
- Broader UX and trust signals — a more genuinely usable, accessible site tends to correlate with a more professionally built, carefully considered product overall, which subtly reinforces trust even for visitors who never consciously notice the contrast decisions themselves.
Who Needs to Care About Contrast Ratios
Designers building a UI or brand palette, developers implementing that design in actual code, content teams choosing colours for slides or marketing graphics, and business owners reviewing a finished website before launch all have a stake in getting contrast right, even if only the designer is thinking about it in these explicit technical terms. A contrast failure discovered late — after launch, after a marketing campaign is live — is more disruptive and visible than one caught during design, which is exactly why building the check into the palette-creation step itself, rather than treating it as a separate later audit, saves real rework.
Common Situations Where Contrast Fails
Light grey text on a white background — a design trend that consistently sacrifices real readability for a subtle, minimal aesthetic, and one of the most common accessibility failures on otherwise polished-looking sites. Text over a busy background image — even when the average contrast technically passes, specific words landing over a lighter or more visually busy patch of the image can become genuinely hard to read. Placeholder text in form fields — often styled at a much lighter, lower-contrast grey than the surrounding UI, frequently failing accessibility standards despite looking intentional and "designed." Disabled button states — commonly styled with low contrast to visually communicate "inactive," but this can cross the line into genuinely unreadable if not checked carefully against the actual contrast requirements.
How to Check and Fix Contrast Issues
Test each meaningful text-and-background colour pairing on your site individually — this isn't a single site-wide number, since different sections can use different colour combinations that each need their own check. Our palette generator has a built-in contrast checker, flagging any pairing that fails AA directly as you build your palette, so you can darken or lighten a colour before it ever ships to production rather than discovering the problem during a later accessibility audit. Build your palette with contrast checked in from the start — see how to choose a colour palette for the complete process this fits into.
Fixing a Failing Contrast Pairing
When a pairing fails, you generally have two levers: darken the lighter colour, or lighten the darker colour (or both), until the calculated ratio clears the threshold you're targeting. It's worth adjusting the colour that has the most room to move without breaking your broader palette's cohesion — if your background is already a near-white neutral, it usually makes more sense to darken the text colour rather than pushing the background toward grey and away from your intended clean, light aesthetic.
A Worked Example: Checking a Real Colour Pairing
Say your palette pairs a dark navy text colour (#1B2340) against a light grey background (#E8E9ED). Running this pairing through a contrast checker might return a ratio of roughly 11:1 — comfortably clearing both AA (4.5:1) and AAA (7:1) for normal text, with plenty of margin. Now say a designer swaps the background for a slightly warmer, lighter tone (#F2EDE4) for aesthetic reasons — even a change that looks nearly identical to the eye can shift the calculated ratio meaningfully, which is exactly why re-checking contrast after any colour adjustment, however minor it looks, is worth doing rather than assuming a small visual tweak couldn't possibly affect a passing ratio.
Colour Blindness and Contrast
Beyond raw brightness contrast, it's worth considering colour vision deficiencies specifically — roughly 1 in 12 men and a smaller share of women have some form of colour blindness, most commonly difficulty distinguishing red from green. This means relying on colour alone to convey meaning (a red error state versus a green success state, with no other visual distinction) can fail for a meaningful share of your actual audience, even if the raw brightness contrast technically passes WCAG. Pairing colour with an additional cue — an icon, an underline, explicit text — ensures the information gets across regardless of how a specific viewer perceives colour.
Contrast Requirements Are a Floor, Not a Ceiling
It's worth treating WCAG's numeric thresholds as a genuine minimum bar to clear, not an ideal target to hit exactly and no further. A pairing that comfortably exceeds 4.5:1 — say, landing closer to 7:1 or higher — reads more easily for more people in more conditions than one that barely scrapes past the minimum threshold, even though both technically "pass." Where your broader design allows it, aiming meaningfully above the minimum rather than exactly at it produces a more genuinely comfortable reading experience, not just a technically compliant one.
Contrast for Data Visualizations and Charts
Charts and graphs carry their own specific contrast considerations beyond plain text — a line or bar representing data needs enough contrast against its background and against neighbouring data series to be genuinely distinguishable, not just aesthetically pleasing. This matters especially for categorical data with several similarly-coloured series, where two colours that look distinct in isolation can become hard to tell apart once rendered as thin lines or small bars, particularly for colour-vision-deficient viewers. Applying the same discipline of checking actual contrast ratios (not just eyeballing a difference) to data visualization, not only body text, closes a common accessibility gap in otherwise well-designed dashboards and reports.
What Happens When a Business Ignores Contrast Requirements
Beyond the direct usability cost to real visitors who genuinely struggle to read low-contrast text, ignoring accessibility standards can carry concrete downstream consequences: some regions have legal frameworks that reference WCAG compliance directly, creating real liability exposure for a business whose site fails basic accessibility standards. Even setting aside legal risk entirely, a site that's hard to read for a meaningful share of visitors is simply leaving usability, engagement, and conversion on the table — an accessibility fix is very often also a genuine usability improvement for everyone, not a narrow compliance checkbox that only benefits a small subset of users.
Testing Contrast Across Different Contexts
Dark mode introduces its own separate set of contrast pairings to check, since a design that passes contrast requirements in light mode doesn't automatically pass in a corresponding dark theme — each mode needs its own independent verification. Hover and focus states often shift colours slightly for visual feedback, and these shifted states need contrast checking too, not just the default resting state. Disabled and placeholder states, as noted above, are common oversights specifically because they're intentionally styled to look muted, which can accidentally cross from "visually de-emphasized" into "genuinely illegible."
Automating Contrast Checks in a Development Workflow
Beyond manual spot-checks, some development teams build automated contrast checking directly into their build or testing pipeline, flagging a failing colour pairing before code ever reaches production, the same way automated tests catch other regressions. This is especially valuable for larger teams or products where colours might be adjusted by multiple people across many components over time, since automation catches a regression introduced by someone unfamiliar with the palette's original accessibility verification, well before it reaches real users.
Contrast and Brand Colour Trade-offs
Occasionally a brand's chosen signature colour simply doesn't have enough natural contrast against common backgrounds to use directly for body text — a light, bright brand yellow, for instance, virtually never clears 4.5:1 against white. This doesn't mean abandoning the brand colour entirely; it means using it deliberately where contrast requirements don't directly apply (large decorative elements, backgrounds behind sufficiently dark text, accent details) while reserving actual body text for a colour that does pass, often a darker, less saturated variant of the same hue rather than an entirely unrelated colour. This preserves brand recognition while keeping the practical, everyday reading experience genuinely accessible.
Building Contrast Checks Into Your Design Workflow
Rather than treating contrast verification as a one-time check before launch, the most reliable approach builds it directly into the palette-creation and design-review process itself — checking every new colour pairing the moment it's introduced, not just auditing the finished product at the end. Teams that build this habit early tend to have far fewer accessibility issues to retroactively fix later, since catching a failing pairing during initial design costs a quick colour adjustment, while catching the same issue after a design is fully built and approved can mean reworking already-finished components.
Contrast Requirements Beyond the Web
While WCAG is specifically a web accessibility standard, the same underlying contrast principles apply just as directly to print materials, signage, presentation slides, and any other visual medium where text needs to be read against a background. A business card with light grey text on white, a presentation slide with pale yellow text on a white background, or a printed banner with insufficient contrast all suffer from exactly the same underlying readability problem WCAG is designed to catch for the web — it's worth applying the same contrast-checking discipline to non-web materials rather than assuming the concern is web-specific.
Frequently Asked Questions
What is a good colour contrast ratio?
At least 4.5:1 for normal text under the WCAG AA standard, the common practical baseline most sites and accessibility guidelines target; 7:1 for the stricter AAA level, typically reserved for contexts with heightened accessibility requirements.
What's the difference between AA and AAA?
AA is the widely referenced standard level (4.5:1 for body text) that most sites target as a practical baseline; AAA is a stricter, enhanced level (7:1) that's harder to achieve across an entire site without significantly constraining colour choices.
How do I check colour contrast?
Use a contrast checker to test each meaningful text-and-background pairing individually — our palette tool checks pairings against WCAG thresholds automatically as you build a palette.
Does contrast matter for anything besides body text?
Yes — WCAG also sets a separate 3:1 threshold for large text, UI components like buttons and form borders, and meaningful graphics, each checked against their own specific requirement rather than a single universal number.
Can a design pass contrast in light mode but fail in dark mode?
Yes — each colour mode has its own independent set of text-and-background pairings, and passing contrast in one mode doesn't guarantee the corresponding pairing in the other mode also passes. Both need separate verification.
Why shouldn't I rely on colour alone to convey information?
Because colour vision deficiencies (most commonly red-green colour blindness) affect a meaningful share of any real audience — pairing colour with an additional cue like an icon or text label ensures the information is accessible regardless of how a specific viewer perceives colour.
What's the easiest way to fix a contrast pairing that fails?
Darken the lighter colour, lighten the darker colour, or both, until the calculated ratio clears your target threshold — adjust whichever colour has the most room to move without disrupting your broader palette's intended look.
Can contrast checking be automated instead of done manually?
Yes — some teams build automated contrast checks directly into their build or testing pipeline, flagging a failing colour pairing before it reaches production, which is especially valuable for larger teams where multiple people adjust colours over time.
What if my brand's signature colour just doesn't have enough contrast for text?
Use it for decorative elements, large areas, or accents where strict text-contrast rules don't apply, and reserve actual body text for a darker, less saturated variant of the same hue — preserving brand recognition without sacrificing everyday readability.
Does font weight or size affect what contrast ratio I need?
Yes — WCAG sets a lower threshold (3:1) for large text (18pt and above, or 14pt bold) than for normal body text (4.5:1), since larger, bolder strokes remain legible at a lower contrast level than smaller, thinner text does.
Should I aim for exactly the minimum contrast ratio or comfortably above it?
Comfortably above it where your design allows — treat WCAG's numeric thresholds as a floor, not an ideal target. A pairing well above the minimum reads more easily for more people in more conditions than one that barely clears it.
Do charts and data visualizations need contrast checks too?
Yes — data series, especially several similarly-coloured categories, need genuine contrast to remain distinguishable, not just against the background but against each other, which matters particularly for colour-vision-deficient viewers reading a dashboard or report.
Are placeholder and disabled-state text commonly overlooked in contrast checks?
Yes — these are deliberately styled to look muted or de-emphasized, which makes them a common place for contrast to accidentally cross from "visually subtle" into genuinely failing accessibility requirements, worth checking specifically rather than assuming they're fine.
Want an accessible, on-brand design system? Scult does UI/UX.
