Color Contrast

Our main goal as web developers and designers is to communicate with the end user, whomever they may be. We use a variety of tools to help us do that, from styles and UI to data filtering and error messaging.

Often times we rely on color to communicate with our styling. Yet, our users may have partial blindness or color blindness. By designing a site with color contrast in mind we can make sure everyone has an equal opportunity to access the website’s information and interact with its user interface.

When finding a colors contrast ratio test the desired text color with a specific background color such as white, #fff, or black, #000. There are four possible scores:

• Fail: A score less than 3.0. The text doesn't have enough contrast with the background.
• AA Large: A score of at least 3.0. The text has an acceptable contrast for type sizes of 18px and larger.
• AA: A score of at least 4.5. The text has an acceptable contrast for text sizes below ~18pt.
• AAA: A score of at least 7.0. The text has an enhanced contrast, which is great for text that will be read for longer periods of time like blog posts.

The following table is an example of how we tested Kindling's brand colors for accessibility compliance standards against black and white backgrounds.

#282c3d

#2D818F