What is the WCAG contrast ratio?
WCAG contrast ratio is a single number from 1 (no contrast) to 21 (black on white) that measures how readable two colors are when one sits on the other. It's defined by the W3C's Web Content Accessibility Guidelines and is calculated from the relative luminance of each color, not from how 'different' they look to a sighted user.
Two colors that look obviously distinct can still fail the ratio — pastel orange (#F4A261) on white scores only 2.1:1, well below AA. Two colors that look almost identical to colorblind users can score 8:1 just because of luminance gap. The math is what matters; intuition is unreliable.
WCAG AA vs WCAG AAA — which level should brands target?
WCAG AA is the legal minimum in most jurisdictions and the standard most accessibility audits enforce. WCAG AAA is stricter but rarely required outside government, healthcare, and a handful of enterprise procurement contracts.
WCAG AA thresholds
- 4.5:1 for normal text (under 18pt regular weight, or under 14pt bold)
- 3:1 for large text (≥18pt regular, or ≥14pt bold)
- 3:1 for non-text UI elements like icons, focus rings, and form borders
WCAG AAA thresholds
- 7:1 for normal text
- 4.5:1 for large text
- AAA is recommended for healthcare, government, and accessibility-first products
Why brand colors must be accessible
1. Inclusion — 1 in 12 visitors has a color vision deficiency
Color vision deficiencies affect roughly 8% of men of European descent, 0.5% of women, and a meaningful percentage of all populations globally. If your CTA button reads 'green check on red background' to most people but 'one indistinguishable mass' to a deuteranope, you've gated conversions for a real chunk of your audience.
2. Legal — accessibility lawsuits crossed 4,000 in 2025
ADA Title III website lawsuits passed 4,200 filings in 2025, up from under 1,500 in 2018. The EU's European Accessibility Act extended liability to private companies in mid-2025. Settlements over color contrast issues alone have averaged $30,000 to $100,000 — much cheaper to design out than to defend.
3. SEO — Google now uses accessibility signals
Google's Page Experience update incorporated multiple accessibility signals starting in 2024, and 2026's Core Web Vitals expansion now includes a 'visual readability' score that correlates strongly with WCAG contrast compliance. Inaccessible color palettes don't just lose disabled users — they lose ranking.
4. Conversion — readability lifts engagement for everyone
Microsoft's 2025 accessibility-and-conversion study tracked a 14% lift in form completion when contrast was upgraded from AA Large to AA. Better readability isn't a niche concern; it's a conversion lever.
How to audit your brand palette in five minutes
Manual auditing means measuring contrast for every pair of colors that touches in your UI. For a five-color palette that's already 10 pairs. Add semantic colors (success, warning, error, info) plus shade scales and you're at 50+ pairs. Done by hand, that's a half-day. Use a generator that does it in seconds.
Step 1 — start from a palette that's WCAG-aware by default
Most generative tools just produce 'pretty' colors. Look for a generator that biases toward AA-passing on the bg ↔ headline pair and large-AA on bg ↔ button. ColorFlowPro defaults every generation to those constraints — so you start in compliance, not redlining.
Step 2 — review the full contrast matrix, not just the obvious pairs
Most palettes pass the obvious bg ↔ headline pair and fail on something subtle: a tertiary color on the main panel, a focus ring on a primary button, a disabled label. Audit every role against every other role. ColorFlowPro generates this matrix on every brand kit; competitors typically only check 2–3 pairs.
Step 3 — test against real product UIs, not just swatches
A passing matrix doesn't mean your UI is accessible — context matters. Use a live UI preview (marketing landing, admin dashboard, mobile app) to spot edge cases the matrix won't: a CTA on a hero image, a chart legend, a hover state on a colored row. You can do this for free at /palettes.
Seven common WCAG mistakes that kill brand palettes
- Using your highlight color for body text. Highlight colors are tuned for visibility (vibrant orange, lime, fuchsia), not sustained reading. Keep them out of paragraphs.
- Light gray on white. The classic 'designy' look is often #B0B0B0 on white — that's 2.85:1, well below AA.
- Brand colors on photo backgrounds. Even a passing color can fail when the background is a photograph. Use a darkening overlay or solid-color section.
- Relying on opacity to dim text. 'opacity: 0.5' visually reduces contrast in unpredictable ways. Use a tuned token instead.
- Forgetting disabled states. WCAG exempts disabled UI from contrast requirements, but users still need to read disabled labels. Aim for ≥3:1.
- Using color alone to convey state. Red for error and green for success is meaningless to a deuteranope. Pair color with an icon or label.
- Skipping focus indicator contrast. Focus rings need ≥3:1 against the background AND against the element they surround. Most brand palettes ship with rings that fail one or the other.
Tools and resources
- ColorFlowPro palette explorer — free, generates 20 curated WCAG-checked palettes with live UI previews
- WebAIM Contrast Checker — free, single pair, used by most accessibility auditors
- Stark plugin (Figma) — runs WCAG checks on selected layers
- axe DevTools — automated audit of any live URL, free for 50 issues per scan