Color Contrast Checker
Calculate the contrast ratio of text and background colors for accessibility
The font-size of this text is 18.5px. Click anywhere to edit this text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Included below are example icons using the selected colors.
Frequently Asked Questions
What is color contrast ratio?
Color contrast ratio typically is the ratio between text color and background color. This refers to the contrast ratio between the light and dark area of two colors. Web content accessibility guidelines require content to be accessible to users who are visually-impaired and/or are color blind. Color combinations that are accessible to all users are essential when creating color schemes for web interfaces.
What is a good contrast ratio for accessibility?
Level AA: For normal text and images of text WCAG recommends at least a contrast ratio of 4.5:1. While they recommend a 3:1 contrast ratio for large text. The 4.5:1 ratio helps users with 20/40 vision was chosen which is common for users age 80.
Level AAA: For the highest level of usability WCAG recommends a 7:1 contrast ratio for text that is designed for users with 20/80 vision. While large text can have at least a 4.5:1 contrast ratio.
What is a WCAG contrast checker?
A WCAG color contrast checker compares a foreground color and background color to give you a contrast ratio. This is extremely useful in addressing WCAG accessibility requirements for your designs and website. For example grey text on a light grey background can be hard to read for some low vision users.
How do you check contrast with color?
Using the ColorKit color contrast checker above you can input any hex color to find the contrast ratio between any two colors. You can paste any hex color codes or use the color picker to select a color. The tool also shows you contrast requirements for different use cases.
