{"id":303361,"date":"2020-02-19T08:36:00","date_gmt":"2020-02-19T15:36:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303361"},"modified":"2020-03-04T07:53:16","modified_gmt":"2020-03-04T14:53:16","slug":"understanding-web-accessibility-color-contrast-guidelines-and-ratios","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/understanding-web-accessibility-color-contrast-guidelines-and-ratios\/","title":{"rendered":"Understanding Web Accessibility Color Contrast Guidelines and Ratios"},"content":{"rendered":"\n

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you\u2019re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that person\u2019s shoes to improve their experience?<\/p>\n\n\n\n

There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight (not reliable*<\/a>), or add a CSS filter to mimic a grayscale view<\/a>). But\u2026 you don\u2019t have to trust your eyes.<\/strong> Not everyone has your exact eyes anyway, so your subjective opinion can possibly be a faulty measurement. <\/p>\n\n\n\n

You can mathematically<\/strong> know if two colors have enough contrast between them. <\/p>\n\n\n\n\n\n\n\n

The W3C has a document called Web Content Accessibility Guidelines (WCAG) 2.1 that covers  successful contrast guidelines<\/a>. Before we get to the math, we need to know what contrast ratio scores we are aiming to meet or exceed. To get a passing grade (AA), the contrast ratio is 4.5:1 for most body text and 3:1 for larger text. <\/p>\n\n\n

How did the W3C arrive at these ratios?<\/h3>\n\n\n

The guidelines were created for anyone using a standard browser, with no additional assistive technology. The contrast ratios that the WCAG suggests were based initially on earlier contrast standards and adjusted to accommodate newer display technologies, like antialiased text, so content would be readable by people with a variety of visual or cognitive difficulties, whether it be due to age, sickness, or other losses of visual acuity.  <\/p>\n\n\n\n

We\u2019re basically aiming to make text readable for someone with 20\/40 vision, which is equivilent to the vision of someone 80 years old. Visual acuity of 20\/40<\/a> means you can only read something at 20 feet away that someone with perfect 20\/20 vision could read if it was 40 feet away.<\/p>\n\n\n\n

So, say your design calls for antialiased text because it looks much smoother on a screen. It actually sacrifices a bit of contrast and ding your ratio. The WCAG goes into more detail on how scoring works<\/a>.<\/p>\n\n\n\n

There are other standards that take contrast in consideration, and the WCAG used some of these considerations to develop their scoring. One is called the Human Factors Engineering of Computer Workstations<\/em><\/a> (ANSI\/HFES 100-2007) was published in 2007 and designated as an American standard for ergonomics. It combined and replaced two earlier standards that were created by separate committees. The goal of the combined standard was to accommodate 90% of computer users, and cover many aspects of computer use and ergonomics, including visual displays and contrast. So, that means we have physical screens to consider in our designs.<\/p>\n\n\n

What does the ratio mean?<\/h3>\n\n\n

The contrast ratio explains the difference between the lightest color brightness and the darkest color brightness in a given range. It\u2019s the relative luminance<\/a> of each color.<\/p>\n\n\n\n

Let\u2019s start with an egregious example of a teal color text on a light gray background. <\/p>\n\n\n\n

<h1>Title of Your Awesome Site<\/h1><\/code><\/pre>\n\n\n\n
h1 {\n  background-color: #888888;\n  color: #1ABC9C;\n}<\/code><\/pre>\n\n\n\n
\"\"
Yikes!<\/figcaption><\/figure>\n\n\n\n
It\u2019s worth calling out that some tools, like WordPress, provide a helpful warning for this when there\u2019s a poorly contrasted text and background combination. In the case of WordPress, a you get notice in the sidebar.<\/p>\n\n\n\n
\"\"
“This color combination may be hard for people to read. Try using a brighter background color and\/or a darker text color.”<\/figcaption><\/figure>\n\n\n\n
\u201cOK,\u201d you say. \u201cPerhaps you think that teal on gray color combination is not exactly great, but I can still make out what the content says.\u201c (I\u2019m glad one of us can because it\u2019s pretty much a muddy gray mess to me.)<\/p>\n\n\n\n
The contrast ratio for that fine piece of hypertext is 1.47:1.<\/strong> <\/p>\n\n\n\n
I wanted a better understanding of what the contrast scores were actually checking and came to find that it requires the use of mathematics\u2026<\/em> with a side of understanding the differences between human and computer vision.  This journey taught me about the history of computer vision and a bit about biology<\/a>, and gave me a small review of some math concepts<\/a> I haven\u2019t touched since college.<\/p>\n\n\n\n
Here\u2019s the equation:<\/p>\n\n\n\n
(L1 + 0.05) \/ (L2 + 0.05)<\/code><\/pre>\n\n\n\n
  • L1<\/code> is the relative luminance of the lighter of the colors.<\/li>
  • L2<\/code> is the relative luminance of the darker of the colors.<\/li><\/ul>\n\n\n\n
    This seems simple, right? But first we need to determine the relative luminance for each color to get those variables.<\/p>\n\n\n
    OK, back to relative luminance<\/h3>\n\n\n
    We mentioned it in passing, but it\u2019s worth going deeper into relative luminance,<\/strong> or the relative brightness of any color expressed into a spectrum between 0 (black) and 1 (white).<\/p>\n\n\n\n
    To determine the relative luminance for each color, we first need to get the RGB notation for a color. Sometimes we\u2019re working with HEX color values and need to covert that over to RGB. There are online calculators that will do this for us, but there\u2019s solid math happening<\/a> in the background that makes it happen. Our teal hex color, #1ABC9C<\/code>, becomes an RGB of 26, 188, 156<\/code>. <\/p>\n\n\n\n
    Next, we take each value of the RGB color and divide each one by 255 (the max integer of RGB values) to get a linear value between 0 and 1. <\/p>\n\n\n\n
    So now with our teal color it looks like this:<\/p>\n\n\n\n
    Component<\/th>Equation<\/th>Value<\/th><\/tr><\/thead>
    Red<\/td>26\/255<\/td>0.10196078<\/td><\/tr>
    Green<\/td>188\/255<\/td>0.73725490<\/td><\/tr>
    Blue<\/td>156\/255<\/td>0.61176471<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Then we apply gamma correction, which defines the relationship between a pixel’s numerical value and its actual luminance<\/a>, to each component part of the RGB color. If the linear value of a component is less than .03938, we divide it by 12.92. Otherwise, we add .055 and divide the total by 1.055 and take the result to the power of 2.4.<\/p>\n\n\n\n
    Our gamma-corrected color components from our teal color end up like this:<\/p>\n\n\n\n
    Component<\/th>Equation<\/th>Value<\/th><\/tr><\/thead>
    Red<\/td>((0.10196078 +.055)\/1.055) ^ 2.4<\/code><\/td>0.01032982<\/td><\/tr>
    Green<\/td>((0.73725490 +.055)\/1.055) ^ 2.4<\/code><\/td>0.50288646<\/td><\/tr>
    Blue<\/td>((0.61176471 +.055)\/1.055) ^ 2.4<\/code><\/td>0.33245154<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    This part of our equation comes from the formula for determining relative luminance<\/a>.<\/p>\n\n\n\n
    We just sort of sped past gamma correction there without talking much about it and what it does. In short, it translates what a computer “sees\u201d into the human perception of brightness. Computers record light directly where twice the photons equals twice the brightness. Human eyes perceive more levels of light in dim conditions and fewer in bright conditions. The digital devices around us make gamma encoding and decoding calculations all the time. It\u2019s used to show us things on the screens that match up to our perception of how things appear to our eyes.<\/p>\n\n\n\n
    Finally, we multiply the different colors by numbers that signify how bright that color appears <\/em>to the human eye. That means we determine the luminance of each color by multiplying the red component value by .2126, the green component value by .7152, and the blue component by .0722 before adding all three of those results together. You’ll note that green gets the highest value here,<\/p>\n\n\n\n
    So, one last time for teal:<\/p>\n\n\n\n
    Component<\/th>Equation<\/th>Value<\/th><\/tr><\/thead>
    Red<\/td>0.01032982  X 0.2126<\/td>0.00219611973<\/td><\/tr>
    Green<\/td>0.50288646  X 0.7152<\/td>0.35966439619<\/td><\/tr>
    Blue<\/td>0.33245154  X 0.0722<\/td>0.02400300118<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    …and add them together for luminance!<\/p>\n\n\n\n
    L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352<\/code><\/pre>\n\n\n\n
    If we do the same to get our L2<\/code> value, that gives us 0.24620133.<\/p>\n\n\n\n
    We finally have the L1<\/code> and L2<\/code> values we need to calculate contrast. To determine which value is \u00a0L1<\/code> and which is L2<\/code> , we need to make sure that the larger number (which shows the lighter color) is always L1<\/code> and is divided by the smaller\/darker color as L2<\/code>.<\/p>\n\n\n\n
    Now compare that result with the WCAG success criteria. For standard text size, between 18-22 points, a minimal result of 4.5 will pass with a grade of AA. If our text is larger, then a slightly lower score of \u00a03 will do the job. But to get the highest<\/em> WCAG grade (AAA), we have to have a contrast ratio result of at least 7. Our lovely combination fails all tests, coming far under 4.5 for regular text or 3 for headline style text. Time to choose some better colors!<\/p>\n\n\n\n
    I\u2019m so glad we have computers and online tools to do this work for us! Trying to work out the details step-by-step on paper gave me a couple weeks of frustration. It was a lot of me getting things wrong when comparing results to those of automated contrast checkers.<\/p>\n\n\n\n
    Remember how teachers in school always wanted you to show your math work to prove how you got to the answer? I made something to help us out.<\/p>\n\n\n\n