Contrast Checker
Verify WCAG 2.2 color contrast ratios using the W3C relative luminance formula.
About the Contrast Checker
The Contrast Checker evaluates the contrast ratio between two colors per the W3C Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced). Enter a foreground color (typically text) and a background color, pick the text size category, and the tool returns the contrast ratio along with a pass/fail verdict against the AA and AAA thresholds.
The contrast ratio is a single number that captures how distinguishable two colors are. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). WCAG 2.2 sets the following minimums: 4.5:1 for normal text (smaller than 18pt regular, or 14pt bold), 3:1 for large text (at least 18pt regular or 14pt bold), and 3:1 for UI components and graphical objects (button borders, focus indicators, icons that convey information). The AAA level requires 7:1 for normal text and 4.5:1 for large text.
WCAG 2.2 is the current Recommendation published 5 October 2023 by the W3C. The contrast thresholds have not changed since WCAG 2.0 (2008). They are based on the work of Aries Arditi, who derived them from empirical legibility research on users with mild visual impairment (approximating 20/40 vision, the threshold for driving without correction in most jurisdictions).
The contrast ratio is computed from each color’s relative luminance, a weighted sum of linearized (gamma-decoded) RGB channels. The gamma-decoding step matters because sRGB is gamma-encoded — without the decode step, the math underestimates the contrast of dark colors. The luminance coefficients 0.2126*R + 0.7152*G + 0.0722*B come from ITU-R BT.709, the same standard HDTV uses for luminance.
How It Works
The algorithm is defined verbatim in WCAG 2.2 Appendix A, ‘Calculating relative luminance’. For each color, each sRGB channel (0-255) is normalized to [0, 1] and then linearized: if c ≤ 0.04045 then c/12.92 else ((c + 0.055) / 1.055)^2.4. The 0.04045 threshold is a linear-to-power transition point that approximates the sRGB transfer function’s small-signal behavior.
The linearized channels are combined into relative luminance: L = 0.2126*R + 0.7152*G + 0.0722*B. The coefficients weight green most heavily because the human eye is most sensitive to green light — a fact discovered in the 1920s and codified in the CIE 1931 color-matching functions.
The contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter (higher luminance) of the two and L2 is the darker. The +0.05 term accounts for ambient light scatter on the screen, which prevents the ratio from going to infinity when one color is pure black. The result is a number between 1 and 21.
The tool also categorizes the input by text size, because the AA threshold for large text (3:1) is lower than for normal text (4.5:1). Large text is defined as at least 18pt regular (24px at default browser zoom) or 14pt bold (19px bold). For UI components and graphical objects (icons, focus outlines, button borders), only the 3:1 minimum applies, with no AAA level.
Worked Examples
Default #0A4F3A on #FFFFFF: the dark green has relative luminance 0.0713, white has 1.0. Ratio = (1.0 + 0.05) / (0.0713 + 0.05) = 1.05 / 0.1213 = 8.66:1. Result: PASS at AAA for normal text. This combination is safe for any text size.
Light gray #999999 on white #FFFFFF: L1 = 1.0, L2 = 0.299. Ratio = 1.05 / 0.349 = 3.01:1. Result: FAIL for normal text (needs 4.5:1), PASS for large text (needs 3:1) at AA. This is the classic ‘placeholder text’ problem — gray placeholders often fail WCAG.
Yellow #FFEB3B on white #FFFFFF: yellow is a high-luminance color (L = 0.789), nearly as bright as white. Ratio = 1.05 / 0.839 = 1.25:1. FAIL at every level. Yellow text on white is unreadable to most users.
Pure red #FF0000 on pure black #000000: red has L = 0.213. Ratio = 0.263 / 0.05 = 5.25:1. PASS at AA for normal text, FAIL at AAA (needs 7:1). The classic cyberpunk color scheme just barely passes AA.
When to Use This Tool
- Verifying that body text on a brand-colored background meets AA before shipping a redesign.
- Checking whether placeholder text in form inputs is accessible (often it is not).
- Confirming focus-indicator contrast against the underlying element (WCAG 2.4.11 Focus Appearance, WCAG 2.2新增).
- Auditing a screenshot of a competitor’s site for accessibility compliance during a UX review.
- Choosing accessible colors for chart series — line colors must contrast against the chart background and against each other for colorblind users.
- Verifying that disabled-state UI still meets the 3:1 minimum for UI components (WCAG 1.4.11 Non-text Contrast).
- Testing dark-mode text colors against the dark-mode background to catch accidental inversions.
Limitations & Disclaimer
The Contrast Checker implements the W3C WCAG 2.2 relative-luminance algorithm verbatim. It evaluates a single foreground/background pair in sRGB; it does not model gradient backgrounds, antialiasing, subpixel rendering, or color-management profiles. For text rendered over images, evaluate the lowest-contrast pixel under any glyph separately. The thresholds assume the user has approximately 20/40 vision (mild visual impairment); users with more severe impairment may need higher contrast than WCAG requires. See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between WCAG 2.1 and 2.2 for contrast?
The contrast thresholds themselves (4.5:1, 3:1, 7:1, 4.5:1) are unchanged between WCAG 2.0, 2.1, and 2.2. WCAG 2.2 (published October 2023) adds new Success Criteria like 2.4.11 Focus Appearance (Minimum) and 2.4.13 Focus Appearance, but these reference the existing 3:1 contrast minimum for non-text elements rather than changing the underlying ratio formula.
Does the checker support 4.5:1 for placeholder text?
Placeholder text is treated as normal text under WCAG 1.4.3, so it must meet 4.5:1 (or 3:1 if it qualifies as large text, which placeholders rarely do). The default light-gray placeholder color used by most browsers is <code>#757575</code> on white, which gives a 4.54:1 ratio — just barely AA compliant. Many custom placeholder colors fail.
What about gradient backgrounds?
WCAG 2.2 evaluates contrast at every point where text is rendered. For text on a gradient, the lowest contrast ratio anywhere along the text glyph must pass the threshold. The Contrast Checker evaluates a single solid color pair — for gradients, test the lightest pixel under the text separately.
Does the checker account for font weight and antialiasing?
WCAG defines ‘large text’ as 18pt regular or 14pt bold; the threshold (3:1 vs 4.5:1) depends on size and weight, not antialiasing. Subpixel rendering and font hinting are not modeled; the ratio is computed from the ideal color pair only.
Why does pure red on pure black pass AA but fail AAA?
Pure red has relative luminance 0.213 (it linearizes from a gamma-encoded 0.5 to a true 0.213 — sRGB encoding is perceptually non-linear). On pure black (L=0), the ratio is <code>0.263 / 0.05 = 5.25:1</code>, which clears AA’s 4.5:1 bar but falls short of AAA’s 7:1. Use a slightly desaturated red (like <code>#FF5555</code>) to push above 7:1.
Is the 3:1 minimum for UI components new?
No. WCAG 1.4.11 Non-text Contrast (added in WCAG 2.1, 2018) requires 3:1 against adjacent colors for UI components and graphical objects. WCAG 2.2 reinforces this for focus indicators via 2.4.11. The 3:1 minimum applies to button borders, icon-only controls, focus rings, and chart series colors.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team