Accessible color
WCAG color contrast: read ratios without overclaiming
A contrast ratio compares the relative luminance of two solid colors. It is a necessary check for many text and interface cases, but it is not a whole-page accessibility verdict. Use the checker for the color pair, then verify the real component, state, typography, and adjacent colors in context.
Choose the criterion before reading the ratio
WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large-scale text. Level AAA uses 7:1 and 4.5:1. Required visual information in active user-interface components and graphical objects uses the Level AA 3:1 non-text criterion against adjacent colors.
Large-scale means at least 18 point, or 14 point bold, with an equivalent size for CJK fonts. A numerical pass does not decide whether your actual typeface, weight, or CJK rendering qualifies as large text.
Do not round a failure into a pass
WCAG defines relative luminance in sRGB and calculates contrast as (L1 + 0.05) / (L2 + 0.05). The checker applies thresholds to the full calculated value and displays three decimals. A value below 4.5 does not pass normal-text AA merely because a shorter display would read 4.50.
The order of foreground and background does not change the ratio. Swapping them is still useful for previewing the intended design, but it cannot turn a failure into a pass.
Test the rendered state, not only two tokens
This tool accepts opaque three- or six-digit sRGB hex colors. It deliberately rejects alpha, CSS color functions, variables, wide-gamut colors, gradients, and images because the final rendered color or adjacent background is not fully described by two inputs.
Check default, hover, focus, pressed, selected, error, and disabled presentation separately where applicable. Text over an image or gradient needs evaluation at the least contrasting relevant area. Logos, incidental text, and inactive components have specific exceptions; do not generalize one result to every element.
Treat the result as review evidence, not certification
Copy the color pair, ratio, and five pass-or-fail rows into a design or code review. Then record the actual component and state being checked. The result does not scan a page, inspect computed styles, assess use of color alone, or certify WCAG conformance.
All calculation happens in the browser. Values are not uploaded or stored. Native color-picker appearance varies by browser; the hex fields remain the interoperable input.
Foreground #767676 on background #FFFFFF → 4.542:1 → normal text AA passes, AAA failsData provenance