color-theory-and-contrast-ratios

There are no definites with color. Sure, you have your red, your green, and so on — but even that is relative. Try to describe a specific red color to a friend. Chances are the description will settle on, for example, is the color more of a brick-red or a fire truck-red?

Describing a color that looks similar to another color is natural way to discuss or express color. But when getting into specifics — accurately defining what it a certain color is — it’s almost impossible. Color, at its core, is a relative and personal experience.

Where does color come from

Electromagnetic radiation (EMR) contains radio waves, microwaves, ultraviolet, X-rays, and much more including a subset of what we call “visible light.” These visible light wavelengths contain all the colors that humans can observe without any additional tools. For each color there is a unique light wavelength. When we see color, our eyes are receiving and processing those wavelengths and converting them to colors.

Rods and cones

As wavelengths process through the iris of our eyes, rods and cones are receptors of wavelengths. They become activated.

Rods determine brightness, while cones determine the hues of red, yellow or blue. Most people have about 100 million rods and 6 million cones.

Cones are where we perceive color — and in our mental processes we start to interpret what the different types of colors are.

How many colors can the human eye differentiate? Under a good lighting or viewing conditions, people could determine up to 10 million different colors.

Color Theory

While color is relative, there has been a great deal of research and practice into organizing colors. There are several models for how to perceive colors — let’s start with some definitions:

All the hues in the color spectrum

Color is also known as hue. Each hue is a specific spot on the color spectrum. A spectrum can be as simple as a band, or wound up in a color wheel.

To work with color, there are different attributes you should know about:

Greyscale representation going from black to light.

The range from black to white is called value.

Three photos with various degrees of contrast applied: Low, None, High.

Contrast is the degree of separation between values.

Three photos with various degrees of brightness applied: Dark, None, Light

Brightness adds white to an image, the lack of brightness tones the image.

Saturation and greyscale representation

Saturation is the measurement of color intensity. The lack of saturation becomes more like greyscale.

Mixing Colors

We can mix colors depending on the method or medium we are receiving color. There are two ways: subtractive primaries and additive primaries.

Subtractive primary colors

The subtractive colors are cyan, magenta, and yellow—mixing these colors, you get a color that closely resembles black. This is because this method uses reflective colors. The colors are using a physical substance like pigments in paint that reflect the wavelengths to the eyes. Take away these colors or their absence, and you are left with white (or whatever color the canvas is).

This is the primary system used in printing, commonly referred to as CYMK (with the “K” representing black ink, the key). The fourth ink is needed to produce a “true” dark black unlike the muddy black that the colors cyan, yellow, and magenta produce on their own.

Additive primary colors

The three additive primary colors of red, green, blue were determined in 1861 by Scottish physicist Sir James Clerk Maxwell. When the colors come together in various combinations, they produce other colors — with all three combining to produce white light. This, in short, is how color on your smart device or computer monitor right now is achieved.

Coding Color

Browsers allow us to select the colors we want to use in our designs in different ways from color keywords like (“red”) to hexadecimal (#FF0000). One of the different ways is with the rgb() syntax.

The rgb() syntax is a set of three values representing red, green, and blue — which are the same values as the additive primary colors. Each value is represented as a number that can range in value from 0 to 255. A value of 0 means that the color should not be present. A value of 255, on the other hand, means the full weight of the color should be present and mixed in with the other colors.

For the color red, this is how the CSS looks like:

/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */

.alert {
  color: rgb(255, 0, 0);
}

While a light green color would be

/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */

.alert {
  color: rgb(128, 255, 128);
}

Graphic representation of HSL model. Caption = HSL cylinder from Wikipedia

The HSL model is another digital color system based within the RGB system. But instead of using red, green, and blue as the way to pinpoint a particular color, it goes about defining color through a different method — hue, saturation, and lightness. HSL places the hues in a full circle from 0 to 360 degrees; while percentages — 0% to 100% — are used for saturation and lightness. For example, the following code signifies the color red:

/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */

.alert {
  color: hsl(0, 100%, 50%)
}

And a light green color is written out such as:

/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */

.good {
  color: hsl(120, 100%, 75%)
}

Low Vision and Color Blindness

One person in twelve has some sort of color deficiency—about 8% of men and 0.4% of women in the U.S. A person with low vision or color blindness will not be able to distinguish text against a background without sufficient contrast.

Types of Color Blindness

  • Deuteranomaly – red-green color blindness is found in about 6% of the male population.
  • Protanomaly – another form of red-green color blindness, affects about 1% of males.
  • Deuteranopia – a form of color blindness where it is hard to tell apart red and green colors.
  • Protanopia – people are unable to perceive any red light.
  • Tritanopia – people are unable to perceive blue light.
  • Achromatopsia – people cannot see any color.

Also, don’t forget that perceiving color is very much a process that includes the mind. So people might have cognitive issues which could affect their perception of color.

Color Accessibility

In the Web Content Accessibility Guidelines (WCAG), there are a number of guidelines that address the use of color. They are 1.4.1, 1.4.3, 1.4.6 and 1.4.11:

1.4.1 Use of color (A)

This guideline talks about using color alone to address or convey meaning. An example is to use color for depicting the bars in a line graph.

In short, we want to make sure we add a design or code treatment that aids in providing the appropriate context to the site visitor.

1.4.3 Contrast minimum (AA)

When providing text to people, we want to ensure that the text can be be perceived. We need to make sure text has enough contrast to come away from the background for legibility.

1.4.6 Contrast enhanced (AAA)

This success guideline is is similar to 1.4.3 but is more rigorous.

1.4.11 Non-text Contrast (AA)

For UI components and graphic objects — such as buttons and icons — we need to provide enough contrast on essential items for navigating a web site.

Checking for Color Contrast

In WCAG 1.4.3 and 1.4.11, one of the approaches, if you will, for helping to make sure colors are accessible is to make sure there is enough contrast between them. Knowing that there are so many millions of colors and knowing people have issues in viewing colors, what could be a way to calculate the contrast between two colors?

It’s hard to pick a path that would remediate issues for color blindness. So, WCAG uses the relative luminance of the colors to help determine contrast in a (somewhat) simple mathematical formula.

The Color Contrast ratio

Relative luminance is the value of luminance but expressed as values normalized from a value of 0 for the darkest black to a value of 1 for the lightest white.

The equation to convert RGB values to relative luminance can be found at WCAG:

For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R   0.7152 * G   0.0722 * B
where R, G and B are defined as:

* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB 0.055)/1.055) ^ 2.4
* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB 0.055)/1.055) ^ 2.4
* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB 0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:

* RsRGB = R8bit/255
* GsRGB = G8bit/255
* BsRGB = B8bit/255

The “^” character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD].

With a method for determining a color’s relative luminance, it’s therefore possible to compare compare them in what is a called a color contrast ratio.

L1 = Relative luminance of the lighter of the colors
L2 = Relative luminance of the darker of the colors

(L1   0.05) / (L2   0.05)

Now with the ability to determine the contrast ratio between two colors, we can use this formula to then set a standard or indication for what’s poor or good contrast for text and graphics.

And with formulas, it’s easy to create tools and apps to determine color accessibility, such as the Colour Contrast Analyzer (CCA) from The Paciello Group.

Screenshot of Colour Contrast Analyser

If you use DevTools, you can visually check and adjust colors to see if they pass color contrast:

Chome DevTools color inspector

There appear to be hundreds of online color contrast checkers. Here are just a few:

Future of Checking Color Contrast

Through research and practice, it’s been found that the algorithm provides false results, as noted by Andrew Somers’ research.

A series of color contrast tests.
Color tests conducted by Andrew Somers.

Currently, a new model for detecting contrast is being worked on by the Silver Task Force, which is working on a new version of Accessibility Guidelines as the current contrast ratio is not an ideal algorithm.

In Conclusion

Color is amazingly complex. It is both conveyed and perceived in a myriad of ways. While color contrast ratio is a simple aid to determine contrast, it is vital to go beyond just stating basic color contrast ratios when working towards accessible and inclusive designs. We need to convey all of the colors’ complexity in our designs so we can address the visual needs of a variety of people.

31 comments

  1. Excellent post. I was checking continuously this blog and
    I am impressed! Very helpful info specially the last part 🙂 I care
    for such information a lot. I was looking for this particular information for
    a long time. Thank you and good luck. 0mniartist asmr

  2. It’s going to be end of mine day, except before end I am reading this wonderful paragraph to increase my experience.

    asmr 0mniartist

  3. Hello there! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good
    success. If you know of any please share. Cheers!

    0mniartist asmr

  4. It is actually a great and helpful piece of info. I’m glad that you shared this helpful information with us.
    Please stay us informed like this. Thanks for sharing.

  5. I loved as much as you’ll receive carried out right here.

    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an impatience over that you wish be delivering the following.
    unwell unquestionably come further formerly again since exactly the same nearly
    very often inside case you shield this hike.

  6. Hey! Someone in my Facebook group shared this website with us so I came to
    look it over. I’m definitely loving the information.
    I’m bookmarking and will be tweeting this to my followers!
    Exceptional blog and fantastic style and design.

  7. Hello! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m definitely enjoying your blog and look forward to new posts.

  8. I take pleasure in, result in I found exactly what I used to be having a look for.
    You have ended my four day lengthy hunt! God Bless you man. Have a great day.
    Bye

  9. hi!,I love your writing very much! proportion we communicate extra
    approximately your post on AOL? I need a specialist in this space to solve my problem.
    May be that’s you! Having a look forward to peer you.

  10. It’s a shame you don’t have a donate button! I’d definitely donate to this outstanding blog!
    I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account.

    I look forward to new updates and will talk about this site
    with my Facebook group. Talk soon!

  11. Hi there, i read your blog occasionally and i
    own a similar one and i was just wondering if you get a
    lot of spam remarks? If so how do you stop it,
    any plugin or anything you can advise? I get so much lately
    it’s driving me crazy so any help is very
    much appreciated.

  12. scoliosis
    Its like you read my mind! You seem to know so much
    about this, like you wrote the book in it or something.
    I think that you could do with some pics to drive the message home a bit, but
    instead of that, this is wonderful blog. An excellent read.
    I’ll certainly be back. scoliosis

  13. scoliosis
    Thanks for another informative website. Where else
    could I get that kind of information written in such a perfect way?
    I’ve a undertaking that I am simply now working on, and I have
    been at the look out for such info. scoliosis

  14. scoliosis
    Do you have a spam issue on this site; I also am a blogger, and
    I was wanting to know your situation; many of us have created some nice practices and we are looking to trade strategies
    with other folks, be sure to shoot me an email
    if interested. scoliosis

  15. dating sites
    Hi would you mind letting me know which web host you’re utilizing?
    I’ve loaded your blog in 3 completely different internet
    browsers and I must say this blog loads a lot quicker then most.
    Can you recommend a good hosting provider at a
    honest price? Thanks a lot, I appreciate it! free dating sites

  16. If some one desires expert view regarding running a blog afterward i suggest him/her to pay a quick visit this webpage, Keep up the fastidious job.

  17. Hey there, I think your site might be having
    browser compatibility issues. When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, superb blog!

  18. I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored subject matter stylish.

    nonetheless, you command get bought an edginess over that you wish
    be delivering the following. unwell unquestionably come more formerly again since exactly the same
    nearly a lot often inside case you shield this hike.

  19. I’d like to thank you for the efforts you have put in penning this blog.
    I am hoping to see the same high-grade content from you in the future as well.
    In truth, your creative writing abilities has motivated me to get
    my own, personal blog now 😉

  20. I am really loving the theme/design of your web site. Do you ever run into any internet browser compatibility
    problems? A few of my blog readers have complained about my website not operating correctly in Explorer but looks great in Safari.
    Do you have any recommendations to help fix this problem?

  21. I don’t even know how I ended up here, but
    I thought this post was good. I don’t know who
    you are but certainly you’re going to a famous blogger if you aren’t already
    😉 Cheers!

  22. Pretty great post. I just stumbled upon your blog and wished
    to say that I have really loved surfing around your weblog posts.
    In any case I’ll be subscribing on your feed and I hope you write once more soon!

  23. I’m gone to say to my little brother, that he
    should also go to see this blog on regular basis to obtain updated from most up-to-date
    reports.

  24. Thanks , I’ve recently been looking for info approximately this
    topic for a while and yours is the best I’ve
    discovered till now. But, what concerning the bottom line?
    Are you sure in regards to the source?

  25. Somebody necessarily help to make seriously posts I would state.
    This is the very first time I frequented your website page and up to now?

    I amazed with the analysis you made to make this particular put up incredible.

    Fantastic task!

Leave a Reply

Your email address will not be published.