Free browser tool
WCAG Color Contrast Checker
Pick a text colour and a background colour to see their contrast ratio and whether they pass the WCAG 2.2 AA and AAA levels for normal text, large text and interface parts like icons and borders.
Built with love by Shushant Lakhyani. Building bestproductivityresources.com
Contrast ratio
11.85:1
- AA normal text (4.5:1)
- Pass
- AA large text (3:1)
- Pass
- AAA normal text (7:1)
- Pass
- AAA large text (4.5:1)
- Pass
- UI parts and icons (3:1)
- Pass
Formula from WCAG 2.2: contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one, and luminance = 0.2126 R + 0.7152 G + 0.0722 B on linear sRGB values. Ratios run from 1:1 to 21:1 and are never rounded up, so 4.49:1 fails a 4.5:1 test. Large text means at least 18 point (24px) regular or 14 point (about 18.66px) bold. AA is success criterion 1.4.3, AAA is 1.4.6 and UI parts is 1.4.11.
Colours are read without transparency. Passing a ratio test is one part of accessibility, not proof that a design meets WCAG or any accessibility law, and this tool is not legal or compliance advice.
Built with love by Shushant Lakhyani. Building bestproductivityresources.com
Private by design. This tool runs entirely in your browser. Nothing you enter or select is uploaded, saved, logged or shared, no AI service is used, and closing the tab clears everything.
Disclaimer. This free tool is provided "as is", without warranties of any kind, for general information and convenience. You use it at your own risk. See the Disclaimer, Terms of Use and Privacy Policy.
More free tools
Every tool is free, runs in your browser and needs no signup.