WCAG Color Contrast Ratio Checker
Free WCAG color contrast checker. Enter text and background HEX colors to get the contrast ratio and see whether they pass WCAG 2.1 AA and AAA.
Tool Configuration Options
What is a WCAG Color Contrast Ratio Checker?
A contrast checker calculates the contrast ratio between a text color and its background using the WCAG 2.1 relative luminance formula. A ratio of at least 4.5:1 passes level AA for normal text, and 7:1 passes AAA. Large text (about 24px, or 19px bold) needs 3:1 for AA. Good contrast makes text readable for people with low vision and on bright screens.
Execution Privacy:Toolbrix processes this utility using🔒 Processed locally — color luminance calculation.
How to use this WCAG Color Contrast Ratio Checker
Enter the text color as a HEX value, for example #14161A.
Enter the background color.
Read the ratio and the AA / AAA results, then adjust the colors until they pass.
Frequently Asked Questions
Q:What contrast ratio do I need?
4.5:1 for normal body text (AA), 3:1 for large text and UI components, and 7:1 for the stricter AAA level.
Q:Does WCAG contrast apply to logos?
No. Logos and purely decorative text are exempt.
Related Tools
Explore similar micro-utilities and developer tools on Toolbrix.
Colorblindness Vision Simulator
Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia vision for design palettes.
EyeDropper Color Picker & Palette Generator
Pick colors from your screen with native EyeDropper API and generate harmonious color palettes.
Color Space Converter (HEX, RGB, HSL, OKLCH)
Convert colors between HEX, RGB, HSL, HSV, CMYK, and modern OKLCH CSS values.