Color Contrast Checker
Pick a text color and a background color to see their WCAG contrast ratio and whether they pass the AA/AAA accessibility thresholds — for checking readability, not for converting color formats (see the Color Converter for that).
How Color Contrast Checker Works
This tool checks whether a text color is readable against a background color, using the WCAG (Web Content Accessibility Guidelines) contrast ratio formula. Enter (or pick) a text color and a background color and it computes the ratio live, then reports pass/fail against the standard WCAG 2.x thresholds for normal text, large text, and UI components.
Formula & Method
Both colors are converted to relative luminance using the WCAG formula: each RGB channel is first normalized to 0–1, gamma-corrected (channel ≤ 0.03928 ? channel ÷ 12.92 : ((channel + 0.055) ÷ 1.055)2.4), then combined as L = 0.2126R + 0.7152G + 0.0722B (weighted toward green since the eye is most sensitive to it). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's -- giving a ratio between 1:1 (identical) and 21:1 (pure black on pure white).
Worked Example
The tool's defaults, dark gray text #1F2933 on a white #FFFFFF background, come out to a contrast ratio of about 14.76:1 -- comfortably clearing every WCAG threshold, including the strictest AAA level for normal text (7:1).
Frequently Asked Questions
- What contrast ratio do I need to pass WCAG AA?
- Normal-sized text needs at least 4.5:1 to pass AA. Large text (roughly 18pt/24px+ regular weight, or 14pt/18.66px+ bold) has a lower bar of 3:1, since bigger text is inherently easier to read at lower contrast. UI components and graphical objects also use the 3:1 threshold.
- What's the difference between AA and AAA?
- AA is the widely-required baseline for accessibility compliance (4.5:1 normal text, 3:1 large text). AAA is a stricter, optional enhanced level (7:1 normal text, 4.5:1 large text) intended for content where readability matters even more, such as text aimed at users with low vision.
- Does color contrast checking cover color blindness?
- Not directly -- this tool only measures luminance contrast (effectively, lightness difference), which is the main factor WCAG contrast ratio addresses. It doesn't check whether two colors are distinguishable to someone with red-green or other color vision deficiencies, which depends on hue as well as luminance.
- Why does swapping the text and background colors give the same ratio?
- The formula always divides the lighter color's luminance by the darker one's, regardless of which one is "foreground" or "background" -- so black text on white and white text on black produce an identical contrast ratio.