Content Marketing Services
Your complete solution from strategy and copy to design and optimization.
Contrast Ratio
A contrast ratio checker to easily calculate color contrast ratios and pass Web Content Accessibility Guidelines (WCAG).
How to use
As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.
This sample text attempts to visually demonstrate how readable this color combination is, for normal, italic, bold, or bold italic text of various sizes and font styles.
It's critical for content readability and web performance that your website's ratio be in the green zone.
Contrast Ratio was created by Lea Verou.
Hint: Press the up and down keyboard arrows while over a number inside a functional color notation. Watch it increment/decrement. Try with the Shift or Alt key too!
Frequently asked questions
What is contrast ratio?
Contrast ratio is the difference between the maximum and minimum brightness of a computer display. It helps measure the readability of your content. The higher the number, the better the readability. Lower numbers (and red on our tool) indicate poor readability.
What is relative luminance?
As defined by the World Wide Web consortium, relative luminance is the relative brightness of any point in a colorspace, normalized to 0 for the darkest black and 1 for lightest white.
What is a good contrast ratio?
A good contrast ratio is any number above 4.5 or 4.5:1, assuming small text exists in your content. According to the World Wide Web consortium, larger text can dip to 3:1, but would ideally be higher.
I got an error in Google Lighthouse that says: “background and foreground colors do not have a sufficient contrast ratio.” What should I do?
You’re in the right place! Use the tool to modify the background and font colors to create a more accessible website. Once implemented, you should no longer receive this error.