Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Accessibility Color Contrast


Why

Text and graphical components on a web page need good contrast so that we make sure that it is perceivable for users. Some of us have reduced vision. Others will be in a situation where contrast is important, like out in a bright sunlight.


What

We measure contrast between text or graphics against the background color. This is called contrast ratio. A white text on a white background has a contrast ratio of 1. This is impossible to perceive. Black text on a white background has a contrast ratio of 21.

There is no perfect ratio. It is not always as high as possible, even though a high contrast is usually more readable than a low contrast. According to Apple, we should strive for a minimum of 4.5, although 7 is preferred


How

One way to measure the color contrast is to use a tool like Contrast Ratio. This accepts multiple color inputs, like RGB, HSL and hex. It even supports transparency, like RGBA. 

Screenshot from Contrast Ratio showing pink color on white background with a contrast ratio of 5.17.

Example from Foodora

Screenshot from Foodora front page showing their use of intense pink as a color with good contrast.

Foodora uses the color Royal Red as their main profile color. The color has the hex code #D60265. On white, the color contrast is 5.17. This is good for decorations, icons, logo and buttons. If Foodora had used this color for bigger chunks of text, the readability would have been poor.


Text on images

To measure contrast on text on top of a background image, we need to find the brightest or darkest part of the image. If the text is bright, look for the brightest part and vice versa.

In this example from Wolt, we have white text on a bright background image. Using a color picker on a light green section gives us the hex value #a1ad95. This is a contrast ratio of 2.35. Not sufficient. One possible improvement is to add a color overlay on that part of the picture with text. The overlay can be solid or have a degree of opacity.

Screenshot from Wolt, showing white text on a light green background.

Different states

Any interactive component has different states – hover, focus, active, unvisited, visited and deactivated. Remember to ensure that the states also have good contrast. Working with states, we have to think about two scenarios:

  • Color contrast needs to be good for all states.
  • Change of contrast from unfocused to focused state is at least 3.
Screenshot of the navigation from the Cos website, showing text with high contrast.

In this example from Cos clothing, the navigation has a color contrast of 9.73.

Screenshot from the main navigation of the Coz web site, showing the hover state with low contrast.

However, hovering Women gives us a hover contrast of 2.84.



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.