Clarification on Colors

Color Accessibility

Read Me

This web page is the presentation material for Clarification on Colors, a presentation on Tuesday, 5/12, 8:30-10:00 during the John Slatin AccessU 2025 conference in Austin, TX.

top

Choosing Website Color Palettes

Choosing the right colors makes your website look better and easier to use. Designers often follow a few proven steps to create a strong and consistent color scheme.

Start with Your Brand

Pick a main color that reflects your brand’s message and style. This will guide the rest of your color choices and help keep your site consistent.

VIDEO: Choosing a Color Palette (2:36)
Summary: Colors in an effective color palette work together, follow your brand's color guidelines, and avoid overwhelming users.

top

Try a Mood Board

Gather images, colors, and textures that match your brand’s feel. A mood board helps you see what works well together before you start designing.

top

Use the 60-30-10 Rule

This simple rule helps balance your colors:

• 60% for your main color (like background areas)
• 30% for a secondary color (like headers or sidebars)
• 10% for an accent color (like buttons or links)

top

Selecting Color Harmonies with Color Wheels

Color harmonies are combinations of colors that look good together. These are based on the color wheel, which shows how colors relate. Popular harmonies include:

• Analogous: colors next to each other (e.g., blue, blue-green, green)
• Complementary: colors opposite each other (e.g., blue and orange)
• Triadic: three colors spaced evenly (e.g., red, yellow, blue)
• Split-complementary: one base color and two colors next to its opposite
• Monochromatic: different shades of one color

Analogous Color Palette

Use colors that are adjacent to each other on the color wheel to create harmonious, comfortable designs.

#3300FF

#6600FF

#0066FF

#00AAFF

#00FFCC

Complementary Color Palette

Complementary colors are pairs of colors that are positioned opposite each other on the color wheel. These color combinations create high contrast and visual vibrance, making content pop. They're ideal for highlighting important elements.

#FF0000

#FF6666

#990000

#00FFFF

#66FFFF

#009999

Triadic Color Palette

Triadic colors are three colors equally spaced around the color wheel (forming an equilateral triangle). This scheme offers strong visual contrast while maintaining harmony and balance. Triadic color schemes tend to be vibrant even when using paler or unsaturated versions of the colors.

#AA00FF

#CC66FF

#FFAA00

#FFCC66

#00FF55

#66FF99

Monochromatic Color Palette

Monochromatic color schemes use variations in lightness and saturation of a single color. This creates a cohesive look that's elegant and easy on the eyes. It's perfect for creating a harmonious, sophisticated design where color isn't meant to distract from content.

top

Color Palette Resources

Here are some online resources for finding ready-made website color palettes.

Websites like the following can help you build or explore ready-made color palettes. You can also check if the colors meet accessibility standards.

• Coolors: Offers ready-made palettes with contrast filters to meet WCAG standards.
• Color Safe: Creates accessible color palettes based on base color and text size.

top

Basics of Accessible Color

• Contrast and Color Accessibility (WebAIM)
• Video: Accessible Color Standards - Designing in the Browser (12:02) Welcome to Designing in the Browser with our host, Una Kravets. Today we're talking about color contrast! We'll go over what the A, AA, and AAA conformance levels mean and how to ensure proper accessibility compliance for your own site. We'll go over how to use Chrome Developer Tools and preference media queries, such as "prefers-color-scheme," to make the right choices for your applications and design systems.
• A Developer's Guide to Color Modes with Nick Croft at WordPress Accessibility Meetup on May 1, 2023. (1:37:10) In this session, Nick Croft showed how to write media queries to make changes to the site and the advantage of using CSS variables with modern WordPress theme development in order to simplify color swaps to make the site most accessible to the greatest variety of users.

top

WCAG Color Guidelines

Level A Guideline

• 1.4.1 Use of Color
  Color should not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

For example: A pie chart that only uses color to indicate the different portions.

Level AA Guidelines

• 1.4.3 Contrast (Minimum)
  Text and images of text must have a contrast ratio of at least 4.5:1, except for large text (minimum 3:1), incidental text, or logotypes.
• 1.4.11 Non-text Contrast
  User interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.

In Simpler Terms:

• Large Text (greater than or equal to 24px) should have a color contrast ratio of at least 3:1.
• Most text (less than 24px) should have a color contrast ratio of at least 4.5:1.
• Bold text with a size less than 18.5px should have a color contrast of 4.5:1 minimum.

Color-Ajacent Guidelines

Success Criteria 1.4.12 and 1.4.13 are not directly about color, but they can indirectly relate to color in the context of accessibility and how visual information is presented. So while these two aren't "color guidelines" per se, they often intersect with color use in real-world design and should be reviewed together with 1.4.1, 1.4.3, and 1.4.11.

• 1.4.12 Text Spacing
  No loss of content or functionality should occur when a user adjusts text spacing using CSS. Proper contrast and background handling must still ensure readability.
• 1.4.13 Content on Hover or Focus
  Additional content triggered by hover or focus must be dismissible, hoverable, and persistent. Visual indicators like color must be accessible and provide sufficient contrast.

top

Color Blindness

Too much realiance on color can alienate people with color blindness. In the greyscale version of this image, the number is impreceivable.

• Choose color combinations that are easy for people with color blindness to recognize. Avoid red and green, green and blue, blue and gray, blue and purple, and green and black. Red and blue work best. To make images and charts more accessible, use high-contrast colors (light and dark.)
• Use distinct patterns so that information is conveyed visually, even when color alone is not distinguishable. Patterns, such as stripes, dots, checks, or hatching, can be added to charts, graphs, and images to differentiate sections or data points.

Normal Color Vision

• Red
• Green
• Blue
• Yellow

Red-Green Color Deficiency (Deuteranopia)

Red and green colors appear indistinguishable

Blue-Yellow Color Deficiency (Tritanopia)

Blue and yellow colors appear indistinguishable

Complete Color Blindness (Achromatopsia)

All colors appear as shades of gray

The Pattern Fill Technique

Most users will see this.

Most color blind users can distinguish between the colors in this bar chart. But users with Monocromacy/Achromatopsia color blindness will see this:

Achromatopsia is the most severe type of color blindness. It affects an estimated 1 in 30,000 people worldwide.

To address this, designers can use fill patterns (in addition to colors) for these bar charts and other charts. For example:

A color bar chart with multiple fill textures.

The same bar chart in greyscale. While the shades of grey are hard to distinguish, the fill textures are distinct.

While the percentage of users with Achromatopsia might seem small, this is a reasonable accommodation when considering all the potential present and future users of this application.

Color Blindness Simulators:

• Color Blind Vision Simulator | Color Blind Glasses Simulator (pilestone.com)
• Coblis - Color Blindness Simulator – Colblindor

top

Color Contrast Ratio

Color contrast

a ratio determined by comparing the luminosity of the text and background color values.

Luminosity

1. Relative brightness of something
2. The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units in candela per square meter (cd/m2). Often the term luminance is used for the relative luminance, Y/Yn, where Yn is the luminance of the reference white point. (CITE: Wikipedia)

In the context of WCAG's contrast ratio, luminosity refers to the relative brightness (or perceived lightness) of a color, calculated from its RGB values using a standardized formula.

Obligatory Math and Science

Note: You don't need to understand or remember this section.

Relative luminance is calculated as the sum of the weighted RGB values, where the weights are:

• 0.2126 for Red
• 0.7152 for Green
• 0.0722 for Blue

These weightings reflect human visual perception (i.e., sensitivity of the human eye to different colors.) The result is a value between 0 (darkest) and 1 (lightest.)

The WCAG relative luminance formula applies different weightings to RGB channels. These weights are derived from the CIE 1931 color space, which is a standardized color model developed by the International Commission on Illumination (CIE). Specifically, they are based on the luminosity function, which describes the average human eye's sensitivity to different wavelengths of light. The weights approximate the perceived brightness of different colors, with green contributing most to perceived brightness, followed by red, and then blue. This is because the human eye is more sensitive to the mid-spectrum wavelengths (green) than to the longer (red) or shorter (blue) wavelengths.

This relative luminance is used to determine how much contrast exists between two colors—typically text and its background.

The contrast ratio is calculated as:

(L1 + 0.05) / (L2 + 0.05)

Where:

• L1 is the relative luminance of the lighter color.
• L2 is the relative luminance of the darker color.

It's not necessary to remember or even understand that science and math in order to determine whether specific color combinations pass or fail.

top

HTML Color names and their Hex, RGB, and HSL Values

NOTE: You don't need to know the HTML color names.

HTML color keywords are pre-defined names for colors that can be used in HTML and CSS to specify the color of text, backgrounds, and other elements. These keywords offer a convenient way to represent colors without needing to use hex, RGB, or HSL codes.

These are the original 16 colors (sometimes 17 with "Orange") defined in the HTML 3.2 and early CSS specifications. They are supported by all browsers. They became a W3C recommendation in January 1997.

Here are the additional 130+ named colors that were later standardized by the CSS Color Module Level 3 Introduced: Early 2000s (popularized around 2002-2003), based on the X11 color system (from Unix systems.) Not part of the original HTML standard, but now officially recognized in CSS3+. By 2005, all major browsers (like Firefox, IE, Safari) fully supported the extended set.

top

Hex Codes

Color hex codes in HTML and CSS are 6-digit hexadecimal values prefixed with a # that represent RGB (red, green, blue) color components.

Format: #RRGGBB
RR = red component (00 to FF in hex, or 0–255 in decimal)
GG = green component
BB = blue component

Example: #FF0000 = pure red (255 red, 0 green, 0 blue)

 

top

Historical Footnote: 216 Web-Safe Colors

Note: "This will NOT be on the test.  This section doesn't have a practical application. It can be safely ignored

Web-safe colors used to be important, but they don’t matter much today because modern screens can show millions of colors. The 216 web-safe colors were made for older computers that had limited color options. These colors followed the RGB model, using only six values for red, green, and blue: 00, 33, 66, 99, CC, and FF.

6 (red) x 6 (green) x 6 (blue) = 126

top

RBG Color Codes

The Native HTML RGB Color Picker

The Native HTML Color Picker:

You can easily add this color picker to one of your web pages with a line or two of HTML. You can run it in your browser with needing to install a plugin, extention, or additional software.

For more about the native HTML Color Picker, visit <input type="color"> at Mozilla.org

More Color Pickers and Other Color Tools

• Color Pickers
  • Colormind: Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.
• Color Contrast Tools
  • Odd Contrast: color contrast tool
  • Colour Contrast Analyser (CCA) from TPGI
  • The Color Contrast Analyser from The Paciello Group
  • Check Your Color Contrast from AudioEye.
  • Tanaguru Contrast Finder

top

RGB Color Cube

The RGB color cube is a 3D model that shows how colors are created in digital displays. This cube is used to represent all possible colors that can be created by mixing these three primary colors.

It has three axes for each of the three primary colors of light: red, green, and blue. Each axis ranges from 0 (no intensity) to 255 (full intensity.) Colors are created by combining different intensities of the three primary colors of light

256 (red) × 256 (green) × 256 (blue) = 16,777,216. (That's ~16.8 billion colors. Compare that to the historical 216 web safe colors.)

The corners of the cube represent eight key colors:

• Black (0, 0, 0): No color
• White (255, 255, 255): All colors combined
• Red (255, 0, 0): Only red
• Green (0, 255, 0): Only green
• Blue (0, 0, 255): Only blue
• Yellow (255, 255, 0): Red and green combined
• Magenta (255, 0, 255): Red and blue combined
• Cyan (0, 255, 255): Green and blue combined

Every point within the cube represents a unique color, defined by its specific RGB values. This model helps us understand how digital colors are formed and related to each other.

• VIDEO: RGB Color Cube - 256x256x256 (:16)
• VIDEO: RGB Color Cube by Patrick Kennelly (2:11)
• VIDEO: The RGB Color Cube by Stan Gibilisco (3:07)
• VIDEO: RGB-HexColors-Explained (14:44)

 

top

RGB Color Contrast Calculator

Visit the RGB Color Contrast Calculator on BoutonJones.com

Alternatively, visit the Contrast Checker on WebAIM.org.

Screen capture of the Contrast Checker on WebAIM.org

top

HSL Color Codes

From the W3C Wiki:
The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).
Cite: https://www.w3.org/wiki/CSS3/Color/HSL

In CSS, it's easier to use HSL to adjust color contrast ratios with HSL than with RGB or hex code. See the following for more information.

• CSS HSL Colors from W3 Schools
• Videos by Kevin Powell
  • VIDEO: Are you using the WRONG color model in your CSS? (9:09) Apr 14, 2021
  • VIDEO: Relative colors make so many things easier! (13:15) Jul 3, 2024
  • VIDEO:A deep dive into CSS color-mix() August 17, 2023
  • VIDEO: Open up new possibilities with custom properties and HSL by Kevin Powell (8:07)
• Why CSS HSL Colors are Better! (With the Power of CSS Variables) by Elad Shechter. Dec 8, 2019
• VIDEO: Creating a Harmonious Color Scheme with HSL (4:56) on the Aquent Gymnasium channel. Jan 13, 2020. Learn how to create a pleasing analogous color scheme using the HSL color system with this tutorial by Jeremy Osborn, Academic Director of Aquent Gymnasium.

 

Does the "lightness" component of HSL color codes correspond to the Luminosity in the color contrast ratio referenced in the WCAG guidelines?

The "lightness" component of HSL (Hue, Saturation, Lightness) color codes and the "luminosity" used in WCAG contrast ratios are related but not identical concepts.

HSL's lightness is a perceptual model that represents how light or dark a color appears, ranging from 0% (black) to 100% (white), regardless of hue. It's a straightforward linear scale where 50% represents the "pure" color.

In contrast, the luminosity used in WCAG contrast calculations (specifically relative luminance) is based on the sRGB color space and accounts for how the human eye perceives brightness differently across various colors. For example, our eyes perceive green as brighter than blue or red of the same intensity.

top

HSL Color Wheel

Image Source: Claude.ai/

The clockwise HSL color wheel with 0° at the top (12 o'clock position) is labeled in 30° increments.

This arrangement is actually a common alternative to the standard HSL representation, and some design tools and color pickers use this orientation because it can be more intuitive for many users.

The wheel clearly shows:

• Red at 0° (top)
• Yellow at 60° (upper right)
• Green at 120° (lower right)
• Cyan at 180° (bottom)
• Blue at 240° (lower left)
• Purple at 300° (upper left)

And the saturation decreases as you move toward the center, with full saturation at the edge.

top

HSL Color Contrast Calculator

Visit the HSL Color Contrast Calculator

top

HSLA Color Values

Note: It's not necessary to understand HSLA for the purpose of A11y.

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

Opacity

1. the condition of lacking transparency or translucence; opaqueness.
2. (In CSS) The degree to which content behind an element is hidden, and is the opposite of transparency.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

See Colors: HSL at w3schools.com

top

Color Converters

Visit the HEX to HSL converter

top

Troubleshooting with Popular Color Checkers

• WAVE (WebAIM Accessibility Evaluation Tool)
• axe DevTools (Deque Systems)
• Lighthouse (Chrome DevTools)
  Available in Chrome DevTools under the "Lighthouse" tab
• Accessibility Insights (Microsoft)
• Color Contrast Analyzer by TPGi
• Coolors Contrast Checker
• Accessible Colors by Adobe
• Pa11y (Command Line Tool)
• eslint-plugin-jsx-a11y: Linter for accessibility in JSX/React projects
• axe-core JavaScript Library
• Accessible Colors: Tests color pairings for WCAG 2.1 AA/AAA compliance.
• Contrast Grid: Compares multiple foreground/background color combinations for WCAG compliance.
• Adobe Color: Features accessibility tools and contrast checking for color combinations.

top

Setting the Color Palette in CSS

You can use CSS to define a set of custom properties (or CSS variables), that store specific colors and styles for a website --- such as a color palette. By defining these variables in one place, you can easily manage your website's visual identity.

You can use these variables throughout your stylesheet to ensure consistency in your design. If you need to change a color or style, you only need to update it in this one place.

The benefits of using CSS variables for colors include:

• Easy theme switching
• Improved readability
• Faster development

In other words, you only need to define your color palette in one place: your CSS file. And you can change the color palette for the entire web site in a single place.

To use these variables, you reference them in your CSS code. For example:

Here's an example of where the primary color is referenced:

top

Tables with Banded Rows

Sample CSS for Alternating Row Colors in a Table

An HTML table showing the lack of row formatting:

top

Greyscale

The Benefits of Developing with a Grayscale Wireframe

• Address color blindness issues early.
• When demonstrating an early design of a web site to clients. It will pre-empt discussions of site aesthetics that might derail the process. It will permit the clients and the design team to focus on layout, site architecture, usability, accessibility, and content.

Sample CSS for a Grayscale Theme

top

Text on Black Backgrounds: Best Practices

Bright, high-chroma colors like yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) stand out well against black backgrounds. These colors provide strong contrast and are easier on the eyes than white text, which can cause fatigue over time.

Although white on black offers high contrast, it's harder to read and more tiring than black on white. For better readability, use lighter font weights and increase line spacing (leading) and letter spacing (tracking). This helps text feel more open and easier to follow.

Use high-chroma colors for headings or important links. Avoid red, purple, and blue on black, as they tend to blur or reduce legibility.

top

Dark Mode

Dark mode, also known as dark theme or night mode, is a color scheme that uses light-colored text and icons on a dark background. It's designed to reduce eye strain, conserve battery life, and provide a visually appealing experience, especially in low-light environments. Dark mode is a widely supported feature in operating systems, applications, and web browsers.

Image Source: Wired.com

As of 5/12/2025, I have not prepared anything further on this topic. But here are some links related to dark mode.

• Dark Mode on the Google Chrome Store website
• Dark Mode Design Handpicked website inspiration
• Do You Really Need Dark Mode?

top

Considering Neurodiversity

For neurodiversity, consider using muted, pastel tones or neutral backgrounds to avoid overwhelming users, and ensure sufficient contrast with text.

In general, neurodiverse audiences have a preference toward muted, pastel hues and neutral tones. Consider using a matte black background with two or three pastel hues to depict data, or a neutral tan, gray, or white background to prevent colors from overwhelming the reader.
From Navigating Neurodiversity: 11 Guidelines for Designing Inclusive Web Pages

Caution: Due to the nature of Neurodiversity, there can not be a "one size fits all" solution that works for everyone who is neurodiverse.

top

Similar pages on BoutonJones.com

• Random Notes on Accessibility
• Accessibility Session Handouts, Videos, and Example Files
• My Adopted SQL Best Practices
• Some Tips and Techniques for Debugging SQL in ColdFusion
• Accessibility Timeline
• Success Criteria for WCAG 2.0, 2.1, and 2.2

top

PowerPoint