Save shortcut
iPhone / iPad
Open in Safari, tap Share → Add to Home Screen → Add.
Android
Open the browser menu → Add to Home screen or Install app.
Desktop
Use the browser’s Install option when available. On Mac Safari, choose File → Add to Dock. To bookmark, press Ctrl+D (Windows/Linux) or ⌘D (Mac).
The shortcut opens this tool. An internet connection is required.
Color Contrast Checker
Check two opaque screen colors against WCAG text thresholds.
How to use this tool
Compare the relative luminance of two opaque screen colors.
- Enter a text color and a background color in HEX, RGB or HSL.
- Check the ratio and the separate normal/large text thresholds.
- Use the result alongside checks of real text size, states and backgrounds.
When it helps
Black on white is 21:1. #777777 on white is about 4.48:1, so it fails AA for normal text even though a rounded display might look close to 4.5. The checker compares full-precision values.
Quick answers
What do AA and AAA mean here?
Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Large text means at least 18 pt regular or 14 pt bold. Contrast alone does not establish that a page is accessible.
How is the ratio calculated?
We linearize sRGB channels, calculate relative luminance, and divide the lighter luminance plus 0.05 by the darker plus 0.05. Threshold checks use the unrounded ratio; the displayed value is rounded to two decimals. Black on white is 21:1.
Can I check transparent colors or photos?
This checker accepts opaque HEX, RGB and HSL colors only. Composite transparency against the actual underlying surface first. Gradients, photos, antialiasing, hover states and focus indicators need separate checks in their real context.
Are my colors saved?
No. Values and the preview stay in this page’s memory. No account, upload, saved history or remote color request is used.