When designing, creating, or presenting content, it is essential to ensure that text has proper contrast with the background.
- The WebAim Contrast Checker is one of many different color contrast checkers that can help you check your color contrast.
- Go to the WebAim Color Contrast Checker.
- To use our contrast checker, enter Hex color values in the Foreground Color and Background Color fields.
- You can also click the color box next to each field to use a color picker.
- Or to enter a different color format (like RGB).
- Enter your text and background colors using their color picker, or enter the color value.
- If you need to extract the color value from a page, you can use Colorzilla or the Contrast Color Accessibility App for Macs.
- Adjust your color until you pass the contrast checker. Required contrast ratios depend on whether you are using normal-sized text or large-sized text.
- Normal text (12-point) requires a contrast ratio of 4.5:1
- Large text (14-point and bold, 18-point, or larger) requires a contrast ratio of 3:1