SBF Color Contrast Checker / Analyzer

Foreground Color

Red

Green

Blue

Hue (°)

Saturation (%)

Brightness Value (%)

Alpha Opacity (%)

Background Color

Red

Green

Blue

Hue (°)

Saturation (%)

Brightness Value (%)

Contrast is:

Analysis Rating

  • Good – color and brightness differences and contrast ratio are good
  • Okay – color or brightness is just okay, or contrast ratio is just okay
  • Poor – color and brightness differences and contrast ratio are low
Contrast Ratio: (>= 7:1)
Color Difference: (>= 500)
Brightness Difference: (>= 125)
WCAG 2 AAA Compliant
WCAG 2 AAA Compliant (18pt+)
WCAG 2 AA Compliant
WCAG 2 AA Compliant (18pt+)
Equivalent Foreground Color #

Analyzing the contrast between foreground and background colors

General operation

Input foreground and background colors by:

Evaluating the contrast

Comparison between the webapp's and the WCAG 2.0 contrast rating

The original 1999 accessibility guidelines for websites recommended minimum differences in color and brightness to insure sufficient contrast between text and background colors.

In 2008, the guidelines were updated to evaluate contrast using relative luminance following ISO and ANSI standards. This resulted in a slightly lower level of contrast as the recommended minimum.

This contrast tool provides two contrast rating methods.

The primary contrast rating method is based on:

The second contrast rating method follows the current web accessibility guidelines:

Alpha opacity

Added to the Checker for 2016 – Opacity (transparency) for the foreground color can be set by entering a percentage (0 to 100) or by adjusting the slider.

The opacity setting supports Google’s Material Design recommendation to use white or black text with the opacity based on the importance of the text, rather than using light gray or dark gray as the text color (the common practice for websites). The slight transparency gives the text a similar shade to the background color, which is easier to read than gray text over a colored background.

Google recommends opacity settings of:

Category White Black White Black
Important text 100% 87% 100% 87%
Secondary text 70% 54% 70% 54%
Disabled & hint text 50% 38% 50% 38%

Drag & Drop color storage

The Drag & Drop area stores colors. (Helpful if you have several text and background colors you want to evaluate.)

Illustration of the Drag and Drop movement

To save a color in the Drag & Drop area, position your mouse over the Foreground or Background color sample. Hold down the left mouse button, and then move the mouse to one of the storage cells. Releasing the mouse button when over a storage cell will save the color.

To return a saved color to the checker, position your mouse over the desired cell, hold down the left mouse button, and move the color to the Foreground or Background color sample area.

Dragging & Dropping also works with tablets and PCs with touch displays.

Color Wheel tool

Clicking one of the five color combination buttons will display contrasting colors based on the top most color in the Drag & Drop area. Clicking a highlighted button (has a red border) will restore the prior color set.

Color combinations

Combinations based on the color wheel are a suggestion only. While colors based on the wheel are generally compatible, that is not always the case.

When run on a tablet, laptop, or PC size display, this app has a function to save colors and drag those colors back to the fore and back ground selectors.

Exchanging color information

Font colors for programs like Microsoft PowerPoint™ are specified in RGB format.

Microsoft Office™ Color Information

Screen capture of the Microsoft color selection dialog

Obtaining color information for items like slide backgrounds may require a three-step process:

  1. Use the Print Screen function to capture an image of the background
  2. Paste the screen capture into a graphics program (e.g. Microsoft Paint™, Photoshop™, GIMP™, etc.)
  3. Use the graphics program’s Color Picker function to get the color information

Microsoft Paint™ for picking colors

Screen capture of Microsoft Paint color selection dialog.

RGB versus HSV for color selection

Computers display colors by controlling the intensity of the red, green, and blue LCDs in the screen.

LCD matrix showing the individual red, green, and blue color crystals that combine to create color images Image source: Wikipedia

If the red, green, and blue crystals are all off, then that area of the display appears as black. If the three crystals are fully on, then that area of the display appears as white. Differing levels of each color changes the perceived color on the screen.

Computers use a six digit hexadecimal value to define a color, two digits for each of the three colors. A two digit hexadecimal value can define 256 levels (0 to 255). While computer systems work in hexadecimal values, people are more comfortable using decimal values (0 to 9), which is probably why most applications use three decimal values for inputting color values.

We do not think about colors in terms of how much red, green, or blue is used. We thing about colors in terms of hue (the color, such as red or yellow), saturation (how much color there is), and value (how strong the color is). This is why using the HSV sliders can be easier for adjusting colors than the RGB sliders.

About the Color Contrast Checker

Why check contrast

Sufficient contrast between text and background colors is important for readability. Website designers (should) select colors per the World Wide Web Consortium (W3C) guidelines so that people with vision limitations can use their site. For presentations, I recommend presenters check their color choices to insure their presentations are readable, even if the room lights are on.

Accessibility Guidelines for Websites

The most recent W3C guidelines, Web Content Accessibility Guidelines 2.0 (WCAG), recommend using the luminosity contrast ratio of the foreground to background colors. Contrast is evaluated based on:

The previous 1.0 guidelines recommended evaluating the color difference and the brightness difference (Accessibility Evaluation Section 2.2).

Contrast for presentations

Contrast is important for presentations, as room lighting can affect the text and slide background colors. While there are no guidelines for contrast in presentations, I recommend checking presentation colors per the W3C guidelines, and using colors that comply with the W3C’s requirements.