When designing or presenting content, it’s important to ensure that text is easy to read by having enough contrast with the background.
Tools like the WebAIM Contrast Checker can help you quickly check and improve your color contrast.
- Visit the WebAIM Color Contrast Checker.
- To use it, enter Hex color values into the Foreground Color and Background Color fields. Alternatively, you can click the color box next to each field to select a color using the color picker.

- You can also enter colors in a different format, like RGB, using the color picker or by directly inputting the color value.
- If you need to extract a color value from a webpage, tools like ColorZilla or the Contrast Color Accessibility app for Mac can help.
- Adjust your colors until they pass the contrast checker. The required contrast ratios depend on the text size:
- Normal-sized text (12-point) requires a contrast ratio of 4.5:1.
- Large-sized text (14-point and bold, 18-point, or larger) requires a contrast ratio of 3:1.