Accessibility is
in the details.
Understand what your contrast results mean and use them to make more inclusive design decisions.
Accurate contrast calculations.
Warke Contrast calculates contrast with the WCAG 2.x relative luminance formula for opaque sRGB hex colors. It evaluates the full-precision ratio before formatting the result for display.
Minimum contrast for regular-size text.
For at least 18 pt regular or 14 pt bold.
Enhanced contrast for regular-size text.
Enhanced contrast for large text.
See the colors in context.
Instantly switch between editorial and interface examples, adjust HEX colors or color pickers, swap foreground/background, and copy production-ready CSS values.
Find a passing alternative.
The tool searches toward lighter or darker color values and suggests foreground or background alternatives that meet the selected threshold. Check the final result in your actual component and design context.
Your private color library.
Create a free account to save up to 500 combinations, review previous selections, export your library as CSV, and manage account details securely.
The checker measures flat, opaque sRGB foreground/background colors only. Transparency, images, gradients, anti-aliasing, hover states, disabled controls and actual background compositing require additional review. Passing color contrast does not mean an entire website conforms to WCAG. Text in logos and incidental text are treated differently by the standard.
Non-text user interface/graphic contrast is reported at 3:1 under WCAG 2.2 Success Criterion 1.4.11 where it applies.
Read WCAG 2.2 from the W3C