What colours should you compare?
Compare the colour of the text with the background behind that text. Enter the two values or sample them with the eyedropper. For a small error message, use the real surface behind the words, including the theme where it appears.
Under WCAG 2.2 Level AA, ordinary text generally needs at least 4.5:1 contrast. Large text generally needs at least 3:1. The criteria define what counts as large and list exceptions, so use the requirement for the actual text.
Where does it run, and what should you keep from a check?
Vispero distributes the free desktop app for Windows and Mac. It can copy the measured result. Record the two colours, the exact text state and the comparison requirement so someone else can repeat it.
For text over a photo or changing background, check the part of the background that gives the lowest contrast with the letters. A passing pair does not tell you how other states, controls or photos behave.
How can you see a pass and a fail with fictional colours?
Use just the colour codes in the desktop tool. You do not need an account, a website or customer data. If you lack the app, write both pairs down and leave the measurement open.
- Set a white backgroundEnter #FFFFFF as the background. Use #AAAAAA as the text colour. For ordinary text, expect the pair to fall below 4.5:1.
- Change only the text colourTry #444444 against the same white. Expect the ratio to exceed 4.5:1. Copy both results and keep the threshold with them.
- Check the actual text state nextIf the real app has a dark theme or coloured error panel, record those as separate checks with their own colour pairs.