WCAG Color Contrast Checker
Enter a text color and a background color to instantly see their contrast ratio and whether the combination passes WCAG 2.x accessibility thresholds for normal text, large text, and UI components. A live preview shows exactly how the pairing looks at a few common text sizes.
Large bold heading text
This is a normal-weight paragraph of body text, shown at a typical reading size so you can judge legibility at a glance.
A small caption or footnote, the hardest size to read at low contrast.
Sponsors
About WCAG Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define a mathematical contrast ratio between two colors so that text remains readable for people with low vision or color vision deficiencies. The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
Relative Luminance
Each color's relative luminance \(L\) is computed from its linearized sRGB channels. For a channel value \(c\) in the range 0–1 (the 0–255 value divided by 255):
\[ c_{\text{lin}} = \begin{cases} c / 12.92 & c \le 0.03928 \\ \left( \dfrac{c + 0.055}{1.055} \right)^{2.4} & c > 0.03928 \end{cases} \]
The three linearized channels are then combined with fixed weights that reflect human eyes' greater sensitivity to green:
\[ L = 0.2126 \, R_{\text{lin}} + 0.7152 \, G_{\text{lin}} + 0.0722 \, B_{\text{lin}} \]
The Contrast Ratio Formula
Given the luminances \(L_1\) and \(L_2\) of the two colors, with \(L_{\text{lighter}}\) being the larger of the two:
\[ \text{Contrast Ratio} = \frac{L_{\text{lighter}} + 0.05}{L_{\text{darker}} + 0.05} \]
The added 0.05 avoids division by zero when a color is pure black (\(L = 0\)).
Thresholds
- AA, normal text — ratio ≥ 4.5:1
- AAA, normal text — ratio ≥ 7:1
- AA, large text — ratio ≥ 3:1
- AAA, large text — ratio ≥ 4.5:1
- UI components and graphical objects (WCAG 1.4.11) — ratio ≥ 3:1
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
Normal-size text needs at least 4.5:1. Large text (18pt/24px regular weight or 14pt/18.66px bold) only needs 3:1, since bigger, bolder strokes are easier to read at lower contrast.
What's the difference between AA and AAA?
AA is the standard legal/practical compliance level required by most accessibility regulations. AAA is a stricter, "enhanced" level — 7:1 for normal text and 4.5:1 for large text — intended for content aimed at users with more significant vision loss.
What counts as "large text" under WCAG?
Text is "large" if it's at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Anything smaller is judged against the stricter normal-text thresholds.
Does this check apply to placeholder text or disabled buttons?
No. WCAG's contrast requirements explicitly exempt incidental text such as placeholder text in an inactive/disabled UI component, purely decorative text, and text that's part of an inactive element, since it isn't meant to convey essential information.
Do I need to check contrast for icons and borders too?
Yes, if they convey meaning. WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio against adjacent colors for graphical objects and UI component states (like input borders, icons, and focus indicators) that a user needs to identify — not just for text.
Does this tool store or upload my colors anywhere?
No. Everything runs client-side in your browser with plain JavaScript — no colors are sent to a server or stored anywhere.