When designing, creating, or presenting content, it is esstential to ensure that text has proper contrast with the background.
- The WebAim Contrast Checker (External link) is one of many different color contrast checkers that can help you check your color contras
- Go to the WebAim Color Contrast Checker (External link) .
- 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 ColorzillaExternal link or the Contrast Color Accessibility App for MacsExternal link .
- 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