Css monochromatic color scheme

monochromatic color scheme is a pain in the neck to use. I find it easy to track the colors but my problem is just difficult to contrast in between the background and text when using monochromatic scheme. any rule of thumb to follow to make life easier when using this color scheme? thanks

1 Like

Hi, there!

This is a good question. It’s always a good idea to think about color contrast when creating a design. WCAG AA requires a minimum contrast of 4.5:1, which is the goal to achieve (or higher). WebAIM: Contrast Checker is a good tool to use if you’re unsure about visual contrast.

These two examples meet AA standards but not AAA standards.
image image

Personally, I do find it easier to work with shades, tints, and hues on a lighter background. But “dark mode” styles can be just as pleasing and attractive. However, on both light and dark backgrounds, we also need to remember that strong contrast can hurt the eyes. (Like putting a bright yellow on white)

The easiest go-to, of course, is to put darker colors on light colors and vice versa, but the more designs you create, the more comfortable you will become working with different color schemes. I encourage you to mess around with different chromatic schemes and to look at how live websites handle these themes as well.

I hope this helps. :slight_smile:

Happy coding!~

1 Like

what’s minimum contrast of 4.5:1 minimum contrast?

1 Like

4.5:1 is the minimum requirement to meet WCAG AA standards for normal text. This is an example:

The contrast ratio is the luminosity difference between the foreground and background colors.

  1. The difference in luminosity can be calculated using the RGB of both colors.

    #6161FF = rgb(97, 97, 255)

    #FFF = rgb(255, 255, 255)

  2. Take each RGB value and divide by 255.

    Foreground = 0.3804, 0.3804, 1
    Background = 1, 1, 1

  3. If RGB value <= 0.03928 divide it by 12.92 Otherwise, you take the value and plug it into this formula ((v + 0.055) / 1.055) ^ 2.4

    All values are greater than 0.03928, so now we use the formula and get

    FG = 0.1195, 0.1195, 1
    BG = 1, 1, 1

  4. Then you take those values and plug them into this formula

    L = 0.2126R + 0.7152G + 0.0722B

    Which is now

    FGL = 0.1831
    BGL = 1

  5. The higher the number, the greater the luminance, so now you use this formula

    contrast = (brightest + 0.05) / (darkest +0.05)

    Which returns
    contrast ≈ 4.5045 or 4.5

1 Like

thank you very much for this info. :slightly_smiling_face: :slightly_smiling_face:

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.