Color and Contrast

Interactive Color Wheel

rgb(0, 0, 0)

rgb(0, 0, 0)



About the Wheel

To check if your colors are contrasting, pick a color from the color selector. The approximate color family will be found with the javaScript located in this page. If the color is a monochromatic, meaning it has no specific value in it's RGB declaration that is greater than 9 away from any other value, it will be classified as one of the main three monochromatics.

  1. white rgb(255, 255, 255) : when all the values in RGB approach max, which is 255
  2. grey range()(rgb(123, 123, 123): when all the values are close, but are inbetween the max 255, and min 0.
  3. black rgb(0, 0, 0): when all the values are approaching 0 in the RGB.
  4. Any grey that has a value 10 or greater in the RGB will be classified by the max R, G, or B into that family

The black range will be drawn as a center point in the circle.
The grey range will be a ring representative of center.
The white will be an outter ring.
This is meant to be a guide only, and is not intended to find the actual ratio. A link to actual ratio calculations is provided in the "Ratio" tab below.


A little explanation of primary, secondary, and the color wheel in art.
The three primary colors are red, yellow and blue. Secondary colors, colors in-between the primaries are orange, green and purple.
The color wheel is an art tool that helps artists visualize where colors are on this spectrum in relation to each other. When paint is mixed, like a primary yellow and a primary blue, there will be the effect that a green is created. It is only an effect however, because the yellow pigment and the blue pigment don't actually combine, but the color reflected off them becomes mixed as it bounces back to the eye to make it seem like a new color is made. Green.
A complementary color can be found on the color wheel in the same quadrant as each others. As neighbors on the color wheel the colors are relational to the primary color they are made from. Green is a complment of yellow and blue. In very basic terms yellow and blue can be combined to appear green. These three colors are complementary to each other.
Complement colors can be great for fluid visual design, and can be used throughout a site for design purposes. The exception being when information is important. This information, such as form text and labels, text that is there to help guide users, and instructions should never be complementary colors. Accenting with a complementary color is fine. Just remember you want everyone to see the hard work you did. Even if they lost their glasses.


A more technical explanation: MDN docs.
Contrast in the art world is when two colors are opposite each other on the color wheel. To the normal human eye, these colors seem to battle agains each other to gain the most focus. While true contrast in art are the most saturated, or closest to their prime color root, oppose each other on the color wheel, in websites there are a few differences. For example, while red and green are 'clashing' or opposing colors on the wheel, someone who is red green color blind will not see the same thing others do. To adjust for that, you can adjust the brightness of the foreground and the text color. Black and white are full contrast. When color starts being added to the mix, remember that the lightness is just as big a factor in the contrast ratio as are the color choices.


A more technical explanation: MDN docs.
There are many sites that can calculate your contrast ratio. It's only a google away. But if you can keep in mind the wheel above, it is easier to develop the proper ratio on your own. The text against the background is the most important, then comes the font size, and its readability.
A fancy, cursive font can be very appealing, but check to make sure it doesn't become invisible when the contrast starts to get low.

The importance of font selection.

The contrast of a page is very important to those who do not have typical eyesight.
If you, or someone you know has to wear glasses for nearsightedness, imagine they had to read this without their glasses. Would they struggle?
Colorblindness can also play a role. If your text color and background color are not sufficiently contrasted, a yellow on green may become impossible for someone with deuteranomaly to see. Font types play a role in contrast in this way also. If a text is thin, or the font is easily blurred into visually incoherent blobs, the information is now inaccessible. If the font is hard to read, it will be hard to read for those that have visual differences.

Below, try changing the font with the selections, and blurring this article with the button.