Accessible color contrast is the quiet difference between text people can read and text they squint past, and on video, where captions flash by in seconds against moving backgrounds. It matters even more than on a static page. The Web Content Accessibility Guidelines (WCAG) turn "readable" into a measurable number, so you can stop guessing and start checking. This guide explains the ratios, how they are measured, and how to catch low-contrast text before you ship it.
What accessible color contrast actually means
Contrast is the measured difference in relative luminance between two colors, typically your text color and the color directly behind it. WCAG expresses it as a ratio, from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read, especially for people with low vision, color vision deficiencies, or anyone viewing your content on a phone in bright sunlight.
Accessible contrast is not a niche concern. Roughly one in twelve men has some form of color blindness, glare and small screens affect everyone, and search and platform guidelines increasingly reward content that meets accessibility baselines. Treating contrast as a design requirement rather than an afterthought makes your work clearer for every viewer, not only those with impairments.
The WCAG contrast ratios you need to know
WCAG defines two conformance levels that matter in practice: AA (the widely adopted baseline) and AAA (an enhanced target). The thresholds depend on text size, because larger text stays legible at lower contrast.
| Content | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under ~18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (~18pt+, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & meaningful graphics | 3:1 | , |
For most marketing and product work, AA is the bar to clear: 4.5:1 for body copy, 3:1 for large headlines. AAA is worth targeting for dense, text-heavy reading experiences. Note that the rules apply to text and to functional non-text elements like icons, form borders, and chart segments, anything a viewer needs to perceive to understand the content.
Why "large text" gets a lower bar
Larger glyphs have thicker strokes and more surface area, so the eye resolves them at lower contrast. That is why a 3:1 headline can be perfectly legible while the same colors at body size would fail. When you set type in your brand kit, record which pairings are cleared for body versus headline use so the distinction is built in rather than rediscovered each time.
How contrast is calculated
You do not need to do the math by hand, but understanding it prevents bad assumptions. The ratio is computed from the relative luminance of each color, a weighted blend of its red, green, and blue channels that approximates how bright the human eye perceives it. Green contributes most, blue least. The two luminance values are then compared as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
The practical lesson: contrast is about brightness difference, not hue difference. Two colors can look very different, a saturated red and a saturated green. Yet have nearly identical luminance and therefore fail. That is exactly the trap that makes content unreadable for people with color blindness, which our guide to designing for color blindness explores in depth.
How to check your color contrast
You have a few reliable options:
- A contrast checker tool, paste in your foreground and background hex values and read the ratio against AA/AAA. Fast for static color pairs.
- Browser dev tools, most include a contrast readout in the element inspector, useful for auditing live pages.
- Design-software plugins, many editors flag failing pairs as you work.
- Automated checks in your pipeline, the strongest option, because it catches problems on every asset instead of relying on someone remembering to test.
If you want to understand the values you are pasting in, our explainer on hex, RGB, and HSL color codes clarifies what each notation means and how they relate.
Common contrast mistakes in video and marketing
Video is where contrast quietly breaks, because the background moves while the text stays put:
- Text over busy footage, a caption that reads cleanly over a dark frame vanishes when the scene cuts to a bright one.
- Brand colors used as text on brand colors, your palette may look harmonious yet fail at body size.
- Thin or light-weight type, reduces effective contrast even when the color ratio technically passes.
- Gradients and overlays, contrast can pass at one end of a gradient and fail at the other.
The fix is usually a scrim (a semi-transparent panel behind text), a heavier weight, or a stroke/shadow that guarantees separation. For a deeper treatment specific to motion, see on-screen text legibility for video. And because color choices carry emotional weight too, it is worth balancing legibility against intent, our piece on color psychology in marketing videos covers that tension.
How CoreReflex flags low-contrast text automatically
This is where checking contrast stops being a manual chore. In CoreReflex, every shot the agentic Director generates passes through a quality gate before it is allowed into your cut. Among the concrete checks that gate runs is on-screen text legibility. It scores whether text in the frame is readable against its background, alongside checks for prompt match, sharpness, motion coherence, and on-brand consistency.
When a shot fails the legibility check, the Director does not start over; it selectively regenerates just that shot until it passes. And because every generation carries a portable provenance trace, model, prompt, parameters, and score, you can replay exactly why a shot passed or failed. That turns contrast from a thing you hope someone caught in review into a gate the system enforces on every frame. You can read how the broader system fits together across brand-focused guides, or check the documentation for how the quality checks are configured. To keep those standards intact across an entire content program, see how teams stay on-brand at scale.
Frequently asked questions
What is the minimum WCAG contrast ratio for text?
For Level AA, the common baseline, normal body text needs a contrast ratio of at least 4.5:1, and large text (roughly 18pt, or 14pt bold and above) needs at least 3:1. The stricter AAA level raises those to 7:1 and 4.5:1 respectively. Meet AA at minimum; aim for AAA on long-form reading content.
How do I check if my color contrast is accessible?
Paste your text and background hex values into a contrast checker and compare the resulting ratio against the AA/AAA thresholds, or use your browser's element inspector for live pages. The most reliable approach is an automated check that runs on every asset, so nothing slips through because a manual test was skipped.
Does CoreReflex check on-screen text contrast automatically?
Yes. The quality gate scores on-screen text legibility on every generated shot as one of its concrete checks, and it selectively regenerates any shot that fails rather than forcing you to redo the whole project. Each result is recorded in a replayable provenance trace, so you can always see why a shot passed or failed.
Make contrast a default, not a debate
Accessible color contrast is a solved problem the moment you stop checking it by hand. Define legible color pairings in your brand kit, target AA as your baseline, and let a quality gate enforce on-screen legibility on every shot the Director produces. You can start free with no credit card and see the legibility check run on your first generated cut.