Design tools
How to check color contrast before you ship
A pair that looks fine on your screen can fail for someone else. Check the ratio before the colors go into a stylesheet.
Use the colors the reader will see
Enter the text color and the background behind it. A hex value such as #1c2233 or an rgb() value both work. The sample sentence updates so you can see the pair, not only the number.
Read AA before you chase AAA
Normal text generally needs 4.5:1 for WCAG AA. Large text can pass AA at 3:1. AAA is stricter, at 7:1 for normal text. If the body text fails AA, change the pair. Do not rely on a bold weight to fix a low ratio.
Placeholders, disabled text, and text on a photograph are the pairs people forget. Check those too if a person has to read them.
The check stays on this page
The colors are not sent to a server. Copy the values you keep into your stylesheet after the ratio is the one you want.