Color contrast checker
This color contrast checker tells you whether text will be readable against its background under the WCAG accessibility guidelines. Designers, developers and content editors use it to pick colors that more people can read.
- Runs in your browser
- Free, no account needed
- Copy or download the result
Result
Example
#767676 #ffffff
Contrast ratio: 4.54:1 Text color: #767676 (rgb 118, 118, 118), relative luminance 0.1812 Background: #ffffff (rgb 255, 255, 255), relative luminance 1.0000 Check Needs Result AA normal text 4.5:1 Pass AA large text 3:1 Pass AAA normal text 7:1 Fail AAA large text 4.5:1 Pass UI components and graphics (AA) 3:1 Pass Large text means at least 24 px regular or 18.66 px (14 pt) bold. The ratio is rounded down to 2 decimals, and pass or fail uses the unrounded value. Transparent colors are not supported. Enter the solid colors as they appear on screen.
How to use the color contrast checker
- Enter the text color on the first line and the background color on the second line of the input box, as #rrggbb, #rgb, rgb() or a basic color name.
- Press Run.
- Check the ratio and the pass or fail results.
- Use Copy result to share the result.
How it works
Each color is turned into relative luminance with the WCAG formula, and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05.
Normal text needs 4.5:1 for AA and 7:1 for AAA, large text needs 3:1 for AA and 4.5:1 for AAA, and user interface parts and graphics need 3:1.
The ratio is shown rounded down to 2 decimals and pass or fail uses the exact value, so 4.499 never shows as a pass.
Transparent colors are rejected; enter the solid color you see on screen.
Everything runs in your browser. Your input is not uploaded or stored.
Questions and answers
What contrast ratio is needed for WCAG AA?
4.5:1 for normal text, and 3:1 for large text and for user interface components.
What counts as large text?
Text at least 18 point (24 px) regular, or 14 point (about 18.66 px) bold.
Does the order of the two colors matter?
No. The ratio is the same either way, because the formula always divides the lighter color by the darker one.