Color Contrast Checker
Check the contrast ratio between foreground and background colors against readability thresholds.
Run tool
This contrast checker calculates the visual contrast ratio between any foreground text color and background color pair. Enter your chosen colors using three-digit hex codes, six-digit hex codes, or standard comma-separated RGB values. The tool trims extra spacing and evaluates the calculated contrast against four standard legibility thresholds: 4.5:1 and 7.0:1 for normal body text, alongside 3.0:1 and 4.5:1 for larger typography. When both color fields match identically, the contrast ratio evaluates to 1.00:1. The calculation rounds the numeric ratio to two decimal places before verifying pass or fail status across each threshold category. If an unrecognized color format is entered, the tool displays an input notice so you can adjust the values to valid hexadecimal or RGB notation. Use this quick evaluation to check color combinations for buttons, headings, body copy, and UI components during your digital design workflow.
Instructions
- Enter a text color in the Foreground field using a 3-digit hex, 6-digit hex, or RGB format.
- Enter a backdrop color in the Background field using a supported hex or RGB format.
- Leave either field blank if you want to use the default values of black for foreground and white for background.
- Review the calculated contrast ratio and the threshold ratings for normal and large text in the output panel.
Examples
- Testing dark charcoal text on a pure white background: entering foreground #333333 with background #ffffff yields a contrast ratio of 12.63:1, meeting all normal and large text readability thresholds.
- Checking blue link text on white: entering foreground #4a90e2 with background #ffffff gives a ratio of 3.02:1, meeting the 3.0:1 threshold for large text but not reaching the 4.5:1 threshold for standard body text.
FAQ
Which color formats can I enter?
You can enter three-digit hex codes such as #000, six-digit hex codes such as #ffffff, or RGB strings like rgb(0, 0, 0). Surrounding whitespace and uppercase letters are handled automatically.
What readability thresholds does this tool check?
The tool evaluates four contrast thresholds: 4.5:1 and 7.0:1 for standard body text, plus 3.0:1 and 4.5:1 for large text such as headings.
What happens if I leave the input fields empty?
When inputs are omitted, the tool applies default values of black (#000000) for foreground and white (#ffffff) for background, producing a 21:1 ratio.
What causes the input notice to appear?
An input notice appears when a color value cannot be parsed as valid three-digit hex, six-digit hex, or RGB notation. Check your formatting to restore standard calculation.