Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
Color contrast checker
Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.
Readable text makes the message clear.
Normal text · Aa 123
Contrast ratio
WCAG 2.2 calculation. Transparent backgrounds are composited over white.
About this tool
Check the foreground and background actually used by your interface. Passing contrast alone does not establish accessibility of the whole page.
How to use
Enter or pick text and background colors. Normal text requires 4.5:1 for AA and 7:1 for AAA. Large text requires 3:1 and 4.5:1 respectively.
Large text means at least 24px, or approximately 18.67px when bold. Transparent backgrounds are composited over white before the contrast is calculated. This checks color contrast only; it is not a complete accessibility evaluation.
Common questions
What counts as large text for WCAG contrast?
Generally at least 24px, or about 18.67px when bold. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1. Transparent backgrounds are composited over white here.
Why can 4.5:1 be displayed while AA still fails?
The visible ratio is rounded to two decimal places, but pass or fail uses the unrounded value. Increase the contrast until the relevant check actually passes.
How should I check text over a photograph or gradient?
Test the actual backgrounds behind the text, including the weakest-contrast area. This tool compares two colors; transparent backgrounds are placed over white, so that assumption must match your page.
Related tools
Opens in a new tab
Comments
0