A color contrast checker is the fastest way to know whether a foreground and background color pair meets WCAG accessibility requirements. Enter two hex values — or pick colors directly — and the tool instantly computes the contrast ratio and shows you which WCAG criteria pass or fail. For web designers and developers, this check is as routine as validating HTML: it catches a common class of accessibility bugs before they reach users.
What color contrast actually measures
Color contrast, in the WCAG sense, is not about hue — it is about luminance. Luminance is a measure of how much light a color appears to emit on a screen. Two colors can look different to someone with normal color vision but have nearly identical luminance, making text invisible to users with color vision deficiencies or in low-light conditions.
The WCAG formula calculates relative luminance for each color by linearizing the sRGB values and weighting the channels: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is then expressed as (L_lighter + 0.05) / (L_darker + 0.05), yielding a number between 1:1 and 21:1. This formula has been stable since WCAG 2.0 in 2008 and is still the normative algorithm in WCAG 2.2.
WCAG contrast thresholds at a glance
The thresholds depend on both the compliance level and the text size:
- AA — Normal text: ≥ 4.5:1 (regular weight, below 18pt / 24px)
- AA — Large text: ≥ 3:1 (≥ 18pt or ≥ 14pt bold)
- AA — UI components: ≥ 3:1 (buttons, icons, form fields, focus rings)
- AAA — Normal text: ≥ 7:1
- AAA — Large text: ≥ 4.5:1
Level AA is the standard legal requirement in most countries. AAA is an enhanced target that many organizations adopt voluntarily for critical content.
The most common contrast failures
Based on automated accessibility audits, these are the color combinations that fail most often:
- Light grey text on white background. A #999999 on #ffffff only achieves 2.85:1 — well below the 4.5:1 AA threshold. This pattern is extremely common for placeholder text and secondary labels.
- Brand color on white. Many brand color palettes were designed without accessibility in mind. A mid-tone blue or green on white often falls between 3:1 and 4:1.
- White text on a medium-saturation color. Buttons with a medium-hue background (e.g., mid-blue, teal, orange) combined with white text frequently fail for normal-weight text.
- Focus ring color against background. Default browser focus indicators often fail the 3:1 UI component threshold against the page background — especially on dark themes.
How to fix a failing contrast ratio
When a color pair fails, you have three options: darken the foreground, lighten the background, or do both. In practice, the most effective approach that preserves brand identity is to adjust the lightness of the text color in HSL space, keeping the hue and saturation unchanged. A shift of 5–10% in lightness is usually enough to move from a failing 3.8:1 to a passing 4.5:1.
The Flowfiles contrast checker includes an automatic suggestion button that finds the nearest color to your current text color that would pass your target level. This makes it easy to fix contrast without completely abandoning your design palette.
Beyond text: UI component contrast
WCAG 2.2 criterion 1.4.11 (Non-text Contrast, Level AA) extends the contrast requirement to user interface components. A button border, a checkbox outline, a slider track, a form field border, and a chart bar all need at least 3:1 contrast against their adjacent background. This is a frequently overlooked requirement that a color contrast checker helps address.
Focus indicators are particularly important: when a user navigates with a keyboard, the focus ring must be visible. WCAG 2.2 added criterion 2.4.11 (Focus Appearance) which specifies both area and contrast requirements for focus rings.