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:

Select compliance level

See below for information about setting the contrast level you want to indicate as Good

Analysis Rating – WCAG 1.0

  • 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

Analysis Rating – WCAG 2 AAA

  • Good – contrast ratio is greater than or equal to 7.0
  • Okay – contrast ratio is greater than or equal to 4.5
  • Poor – contrast ratio is less than 4.5

Analysis Rating – WCAG 2 AA

  • Good – contrast ratio is greater than or equal to 4.5
  • Okay – contrast ratio is greater than or equal to 3.0
  • Poor – contrast ratio is less than 3.0
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 (Techniques For Accessibility Evaluation And Repair Tools from April 2000).

In 2008, the guidelines were updated to evaluate contrast using relative luminance following ISO and ANSI standards (ISO 9241-3 & ANSI/HFS 100-1988). This resulted in a slightly lower visual (color & brightness) difference in the colors as the recommended minimum.

User selectable Good|Okay|Poor

Added for 2018 – The ranges for Good|Okay|Poor are now user selectable using a dropdown menu. The Good|Okay|Poor ranges can be selected from:

WCAG 1.0
Guidelines
WCAG 2 AAA
Compliant
WCAG 2 AA
Compliant
Good Color diff. >= 500
Brightness diff. >= 125
Contrast ratio >= 7.0
Contrast ratio >= 7.0 Contrast ratio >= 4.5
Okay Contrast ratio >= 4.5 Contrast ratio >= 4.5 Contrast ratio >= 3.0
Poor Contrast ratio < 4.5 Contrast ratio < 4.5 Contrast ratio < 3.0

The webpage will remember the Good|Okay|Poor setting using the browser’s local storage function.

The older, more stringent 1.0 guidelines are helpful when evaluating text to be used in a presentation (the reason this tool was built). For web design, the WCAG 2.0 AA & AAA guidelines provide practical levels of contrast, and now the tool can be configured to indicate Good|Okay|Poor based on the current guidelines.

Contrast Reminder – If you do select a lower contrast level setting, the webpage will remind you of the lower setting every time the webpage is loaded.

To disable the reminder (if you find it annoying and aren’t worried about using the wrong setting by accident) uncheck the selection box below:

The display also rates the contrast following the current web accessibility guidelines:

Contrast rating display

Alpha opacity

Added 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. Presentations designers should also check their color choices to insure their presentations have sufficient contrast, 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.