WCAG Contrast Checker
Check foreground and background color contrast against WCAG ratios.
Enter foreground and background colors to calculate their contrast ratio and compare it with WCAG AA and AAA guidance. The check runs locally in your browser.
Use three- or six-digit opaque HEX colors, with or without the leading #. CSS color names, alpha transparency, gradients, and image backgrounds are outside this checker.
How to use
Enter two opaque HEX colors such as #1f2937 and #ffffff, then choose Check contrast. Three- and six-digit HEX values are supported, with or without the leading #.
The output reports the contrast ratio and whether the pair passes WCAG AA and AAA thresholds for normal text, large text, and, when selected, non-text UI components. Near-threshold ratios are displayed without rounding up so a value just below a requirement is not shown as a false pass.
Use Swap colors to reverse the foreground and background. The preview applies the same pair so you can quickly check whether the result is readable in context.
Contrast ratio is only one accessibility check. Font weight, text size, anti-aliasing, opacity, focus states, and surrounding layout can affect real readability, so review the final interface in context.
Color values stay in your browser and are not uploaded by this tool.
