Contrast checker
Calculate the contrast ratio between two three- or six-digit HEX colors.
Loading the tool… JavaScript is required for processing on your device. The instructions and examples below are available without JavaScript.
How to use it
Enter foreground and background hex colors to compare normal and large text.
Good to know
Large text means at least 18 pt regular or 14 pt bold. This checks color contrast only.
Check a foreground and background pair
Enter the text color and the color behind it. Black #000 on white #fff produces a 21:1 contrast ratio; the tool marks all four displayed normal-text and large-text AA and AAA checks as Pass.
Use the result as one accessibility check
The tool calculates a color ratio and compares it with its displayed thresholds. It is useful while choosing label, button, or body-text colors before testing the finished interface.
Color contrast alone does not assess font size, weight, focus visibility, states, images of text, or whether people can understand and operate a page. Test the actual component and its states too. Only three- and six-digit HEX inputs are accepted.