Contrast helps determine whether text remains readable against its background. This workspace measures one pair of solid colours and shows the applicable text thresholds.
Open the Colour Contrast Checker to follow the workflow. Processing runs in your browser; the tool does not upload the input for conversion.
Read the ratio before the badge
A ratio ranges from 1:1 for identical luminance to 21:1 for black against white. The displayed ratio is rounded for readability, while pass/fail decisions use the unrounded calculation. A pair just below a threshold does not pass simply because the rounded number appears to reach it.
Normal and large text have different thresholds
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Large text is at least 18 pt regular or 14 pt bold under these criteria. AAA is stricter. Choose the row that matches the real rendered text, not the label that produces a preferred result.
One colour pair is not a whole-page audit
Transparency, gradients, images and changing states can produce different effective backgrounds. Check links, hover states and form controls in their real contexts. Colour contrast is one part of accessibility; keyboard interaction, structure and readable content still need attention.
A practical workflow
- Set the text and background colours. Choose two solid colours using the colour inputs.
- Run Check contrast. The tool computes the luminance ratio and text assessments.
- Read the correct text row. Use Normal or Large based on the actual font size and weight.
- Save or revise the colour pair. Download the report or adjust colours and check again.
Try the brand-colour example
Use #000E3A for text and #FFE070 for the background, then check the ratio and each text assessment. Reverse the pair to see that the luminance ratio stays the same. Change the colours to test the pair used in your own component.
If the result needs attention
This checks one solid colour pair, not the accessibility of an entire page. Large-text rules depend on the actual font size and weight.
Read the exact error before changing the input. Keep a copy of the original, reduce the sample when investigating a large file, and use the destination application to verify that the result has the meaning you intended. The tool processes the supplied data; it cannot infer an unstated application schema or project requirement.
For website delivery, check your PageSpeed report after deploying the actual asset. Use the Contrast Checker for text colours and the Favicon Generator for launch icons.
Sources and further reading
Turn the next step into a project
Need help with a brand identity, business website or launch assets? Explore SOPIDOTECH services and client projects, or discuss your brief.