Proof before praise · UX
Can you read it?
A beautiful design still needs readable text. Check the actual colour pair, then improve it.
Try a real check
Enter #777777 for text and #ffffff for the background. This pair looks understated, but its contrast is below the 4.5:1 threshold for normal text. Change the text to #000000 and check again.
Check your colours
Paste the text and background colours from your design. This checks one colour pair on your device; it does not save or send them.
Use opaque hex colours such as #123456 or #fff.
JavaScript is needed to calculate a ratio here. You can inspect the W3C contrast guidance and use another contrast calculator.
Based on WCAG 2.2 contrast for text: 4.5:1 for normal text and 3:1 for large text. Large means at least 24 CSS px, or about 18.67 CSS px if bold. Thresholds use the full calculated ratio; the displayed number is rounded down. This does not check images, transparency, gradients, focus, layout, readability, or overall accessibility.
Put your agent to work
Ask any assistant: “Suggest three text colours for my background #ffffff. Explain how you would check normal-text contrast. Do not claim a colour passes without showing the ratio.” Check each pair yourself above and inspect it in your actual design.
Randori: keep your background fixed and choose a different colour that meets the normal-text threshold. Explain what changed and which additional accessibility checks still matter.
