Contrast ratio is the difference between the brightest whites and the blackest blacks of any display. High contrast ratios deliver whiter whites and blacker blacks and a greater degree of gray values in between. If the contrast ratio is low, even if the image is bright, your image will look washed out.
Contrast Ratio on web design is of major importance due to Web Accesibility. You may fin the specification of W3C over here. This Guideline has three Conformance Level for testings:
- A (lowest), contrast ratio of
- AAA (highest)
Of course, the aim of every website is to get the highest as possible OR to provide an alternative version of the website. We must ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. There are multiple features to take into account when we face web color contrast:
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
Background: Brightness = ((255 * 299 + 255 * 587 + 255 * 114))/1000 => RGB(255,255,255) equals to 255
Foreground: Brightness = ((0 * 299 + 75 * 587 +180 * 114))/1000 => RGB(0,75,180) equals to 64
The rage for color brightness difference here is 201, the recommended value is more than 125. Therefore, we are OK so far!
Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))
(255 – 0) + (255- 75) + (255 – 180) => 510
The range for color difference should be higher than 500.
There are multiple tools online which you may use to get the contrast ratio between two colors:
- Lea Verou’s: You can use HSL/A, RGB/A and many other formats!
- OpenWAX: Firefox Plugin. You get the score of the website you are analysing and you can toggle to grayscale and calculate contrast ratio
- Color Contrast Analyzer: Chrome Plugin which lets you know the contrast ratio of a website and offers a grayscale preview.
Bear in mind that Contrast Ratio requires at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
I hope this article proves useful to you! If you have any recommendations you can just leave me a comment 🙂