Information Technology Systems and Services

Web Design References

Color & Contrast

(Skip Page Index) Page Index:

Tutorials
Theory & Models
Comprehensive Sites
Contrast
Vision Deficiencies
Tools
Articles

Tutorials

3 Common Color Accessibility Issues One Can Easily Avoid (2023) - Aparna Pasi
A Practical Guide to Designing for Colorblind People (2024) - Nam Le Thanh
Color and Contrast, What Does It Mean? - Erik Kroes
Color Blind Essentials - Daniel Flück
Color Tutorial - Tom Jewett
Colour Accessibility - Geri Coady
Foundations
- Foundations: Colour Contrast - Henny Swan
- Foundations: Colour and Meaning - Henny Swan
Introduction to Color & Contrast (2023) - Ellen Liebert, Matthew Russell, and Rachael Bradley Montgomery
Intro to Colour Contrast (2024) - Javier Cuello
Introduction to Color and Accessibility - Andrew Somers
November Accessibility Focus: Color Contrast (2023) - Pope Tech
The Fundamentals of Color: Hue, Saturation, And Lightness - Steven Bradley
Type and Colour - Joe Clark

Up to Page Index

Theory & Models

A Precise CSS3 Color Table - Eric A. Meyer
Color Theory and Color Models - Brown University
Color Theory and Contrast Ratios - Christopher Schmitt
Color Theory for Digital Displays: A Quick Reference: Part I - Pabini Gabriel-Petit
Color Theory for Digital Displays: A Quick Reference: Part II - Pabini Gabriel-Petit
Color Theory for the Color Blind - Mario Parise
Design Festival: Color Theory 101 - Jason Beaird

Up to Page Index

Comprehensive Sites

Up to Page Index

Contrast

3 Color Contrast Accessibility Tools With Examples (2023) - Whitney Lewis
Accessibile Color Contrast: Icons Now Included - Mary Gillen
Accessible Contrast Ratios and A-Levels Explained - Team Stark
Accessibility Contrast Requirements Explained and How to Fix 5 Common Low-Contrast Issues - Whitney Lewis
Accessibility Tip: How to Test Color Contrast Ratios - Eric Karkovack
Alternatives to Low-Contrast Text (Video) - Katie Sherwin
An Interactive Guide to Color and Contrast - Nate Baldwin
Applying APCA and Huetone for Color Accessibility of User Interfaces (2023) - Kirill Ulitin
Assistive Technology Experiment: High Contrast - Jon Whiting
Calculating Color Contrast - Brian Suda
Can You Identify Which Color Combination has the Greatest Contrast? - Thomas Logan
Clarifying Color Contrast & Font Size Guidelines - Marcy Sutton
Color Contrast, Beyond the Basics - Beth Raduenzel
Color Contrast Crash Course for Interface Design - Matt D. Smith
Color Contrast Tests for System Color FieldText with Opacity:0.54 - Steve Faulkner
Color Safe - Build Accessible Color Palettes Based on WCAG Guidelines - Sarah Gooding
Colour Contrast and CSS Sprite Maps - Gez Lemon
Colour Contrast Analyser (Tutorial) - Ellen Liebert and Matthew Russell
Colour Contrast Check Tool Updated - Jonathan Snook
Colour Contrast - Why Does it Matter? - Richard Morton
Contrast - Accessibility for Web Writers, Part 6 - Dey Alexander
Contrast and Color Accessibility - WebAIM
Contrast Rebellion - Zoltan Gocza and Richard Gazdi
- Interesting Cause - http://contrastrebellion.com - WebAIM Thread
Design Accessibly, See Differently - Color Contrast Tips And Tools - Cathy O' Connor
Designing for Color Contrast: Guidelines for Accessibility - Bureau of Internet Accessibility
Designing with Contrast - Mark Mitchell
Detailed Analysis of APCA (2022-07-16) - Tobias Bengfort
- Rebuttal to Tobias Bengfort's "Detailed Analysis of APCA - Andrew Somers
Does the Contrast Ratio Actually Predict the Legibility of Website Text? - Sam Waller
Easy Color Contrast Ratios - Lea Verou
Effective Colour Contrast - S.R. Emerson
Ensure High Contrast for Text Over Images - Aurora Bedford
Evaluating Color and Contrast-How Hard Can It Be? - Jon Whiting
Example Luminosity Contrast Ratios - Gez Lemon
Find Colour Contrast - Tharindu Liyanagunawardena
Fixing Contrast Issues, on Your Own Site and Elsewhere - Kilian Valkhof
Foundations: Colour Contrast - Henny Swan
Graphics Contrast - Alastair Campbell
Going Beyond Color Contrast (Video) - Schalk Neethling
Have You Ever Wondered Why the WCAG Colour Contrast Ratio Doesn't Always Seem to Work? - Dan Hollick
High Contrast, A PostCSS Plugin Story - Eduard Pochtar
High Contrast Mode and Dark Theme Accessibility Testing - Accessibility at Minnesota IT Services
High Contrast Mode FTW - Jon Jensen
High Contrast Mode Primer - Becky Gibson
High Contrast Option for Color Contrast - Dennis Lembree
How APCA Changes Accessible Contrast with Andrew Somers (Video) (2023) - Colleen Gratzer
How to Fix Your Low-Contrast Text - Ben Myers
How to Measure Color Contrast, for Web Accessibility - Joseph C. Dolson
How to Use the Contrast Checker in Chrome DevTools - Kezz Bracey
Images, Illustrations, and Contrast - Martin Underhill
Improving Color on the Web - Dean Jackson
Integrating Contrast Checks in Your Web Workflow - Geri Coady
iOS Color Contrast Best Practice: Increase Contrast - Jennifer Korth
JavaScript Contrast Class - Gez Lemon
Dark Mode vs. Light Mode: Which Is Better? - Raluca Budiu
Light Text On a Dark Background vs. Readbility - Roger Johansson
Low-Contrast Text Is Not the Answer - Katie Sherwin
Luminance is King! (2023) - Andrew Somers
Luminance Contrast and Perception - Andrew Somers
Luminosity Contrast Ratio Algorithm - Gez Lemon
Luminosity Contrast Ratio Main Colour Contrast Analyser - Gez Lemon
OS High Contrast versus Inverted Colors - Adrian Roselli
Nailing the Perfect Contrast Between Light Text and a Background Image - Yaphi Berhanu
Orange You Wondering About Contrast? - Andrew Somers
Pale Text on a Light Background - Neil Milliken
Prefers-contrast: forced is a Mistake - Kilian Valkhof
Provide Enhanced Contrasts for Large Sized Text - Denis Boudreau
Quick Note On High Contrast Mode - Scott O'Hara
Update to Color Contrast Tester - Joe Dolson
SAPC Visual Contrast Demo - Andrew Somers
Supporting Windows High Contrast Mode - Sarah Higley
Styling for Windows High Contrast with New Standards for Forced Colors - Microsoft Edge Team
Testing Color Contrast & Simulating Color Blindness with the Firefox Accessibility Inspector (Video) - Jen Simmons
Testing Web Design Color Contrast - Adam Argyle and Charlie Gleason
Text Contrast for Web Pages - Stephen Burgess
Text Contrast Issues That Cannot Be Detected with Automated Tools - Adrian Roselli
Text Contrasts - Openweb
The Effect Of Luminance and Contrast Ratio On Accessibility - Steven Bradley
The Easy Intro to the APCA Contrast Method (2023) - Andrew Somers
The Impact of Color Contrast on Accessibility (2024) - Fahad Lambate
The Realities And Myths Of Contrast And Color - Andrew Somers
The Science of Color Contrast - An Expert Designer's Guide - Justin Baker
When I Get That Low Contrast Feeling, I Need Non-Textual Healing - Ian Lloyd
Testing Color Contrast in Mobile Apps - Jennifer Dailey
Text Contrast Issues That Cannot Be Detected with Automated Tools - Adrian Roselli
Understanding WCAG 2 Contrast and Color Requirements - WebAIM
Updated Color Contrast Checker - WebAIM
Usability Tip: Don't Rely on Color to Convey Your Message - Tammy Guy
WCAG: Accessible Colour and Contrast Ratios - Andy Barnes
What's Red & Black & Also Not Read? - Andrew Somers
Why Color Contrast is Not As Black and White as it Seems - Roger Attrill
What is the Next Thing About Colour Contrast (Video) - Vicent Sanchis
What Should Be the Contrast Level of Inactive Buttons? (2023) - Giulia Alfarano
What's With All the Gray? - John Brandt
Why APCA as a New Contrast Method? - Andrew Somers
Why Your Mac Color Contrast Testing Might Be All Wrong - Rodrigo Sanchez
Windows High Contrast Mode and Accessibility Testing - Maxability
Windows High Contrast Mode (WHCM) and System Colors - Adrian Roselli

Up to Page Index

Vision Deficiencies

5 Questions About Color Blindness - Daniel Flück
9 Percent Of Men And .5% Of Women Are Colorblind - Susan Weinschenk
An Explanation of Colorblindness - Jon Hicks
Chasing Rainbows - Andy Baio
Color and Accessibility - merttol
Colorblind Accessibility Manifesto - Federico Monaco et al.
Colorblind Accessibility on the Web - Fail and Success Cases - Hampus Sethfors
Colorblind HomePage - Terrace L. Waggoner
Colour Blindness Accessibility Community Group - W3C
Colour Blindness and the Web - Richard Ingram
Color Blindness Simulation in Short Films - Daniel Flück
Color Blindness Tests - Daniel Flück
Colblindor - Daniel Flück
Colour Deficit Help - Matthew Atkinson
Colour-Vision Deficiency - Joe Clark
Color Vision Testing Made Easy - Terrace L. Waggoner
Considering the Color Blind - Chuck Newman
Emulate Vision Deficiencies in DevTools - Addy Osmani
Ensuring Accessibility for People With Color-Deficient Vision - Pabini Gabriel-Petit
Everybody is Color Blind - Daniel Flück
How Color Blindness Works (Video) - Tom Blatherwick
How the Color Deficient Person Sees the World - Color vision testing
More Adaptations for Color Blindness - Joe Clark
Red-Green Color Blindness - Daniel Flück
The UX of Among Us: The Importance of Colorblind-Friendly Design - Unma Desai
Types of Color Blindness - Daniel Flück
We Are Colorblind - Tom van Beveren
What is Color Blindness? - Daniel Flück
What is colourblindness? - Joe Clark
What It's Like Being a Color Blind Designer - Lis Andramaioli

Up to Page Index

Tools

Up to Page Index

Articles/Related Links

4 Reasons Why You Should Design Without Color First - Anand Satyan
5 Ways to Improve Your Ecommerce Design for Colourblind Users - Geri Coady
A Contrast of Errors - Andrew Somers
A Tale of a Colour Blind Designer - Matej Latin
A Visionary Approach: How a Team Developed Accessible Maps for Colorblind Scientists (2024) - Argonne National Laboratory
A Visionary Approach: How an Argonne Team Developed Accessible Maps for Colorblind Scientists (2024) - Marguerite Huber
A Whole Bunch of Places to Consider Contrast in a Single Paragraph - Chris Coyier
Accessible Color Themes (2024) - Ellen Liebert, Laura Biray, and Rachael Bradley Montgomery
Accessible Firebrand: 'Why Can't I Use My Brand Color There, and if Not There, Then Where?' (Video) (2024) - Mark Alvis and Deneb Pulsipher New!
Accessibility for Web Writers, part 5 - Dey Alexander
Accessible Color Standards - Designing in the Browser (Video) - Una Kravets
Accessible Interface Design - Adrian Rapp
Accessible Palette: Stop Using HSL for Color Systems - Eugene Fedorenko
Accessibility for Mobile Web: Improving Color Contrast - CB Averitt
Busy Background Breaks Bulletin - Andrew Somers
Change the Color of Visited Links - Jakob Nielsen
Color Alone, Color Contrasts, Color Conflicts (Video) - Luis Garcia
Color Accessibility Workflows - Geri Coady
ColorAdd: A Color Coding System - Daniel Flück
Color Accessibility: Tools and Resources to Help You Design Inclusive Products - Stéphanie Walter
Color Alone Video - Earth, Wind & Fire Accessibility PSA
Color and Universal Design - Steven Hoober
Color and User Experience - Ashley Karr
Colorblind Accessibility Manifesto (2024) - Federico Monaco.
Colorblind Users Push Technology Designers to Use Signals Beyond Colors - Katie Deighton
Color Books
Color in Design Systems - Nathan Curtis
Color Systems - Part 1 - Steven Bradley
Color Systems - Part 2 - Steven Bradley
Color Within Constraints - Linzi Berry
Colors in UI Design: A Guide for Creating the Perfect UI - Slava Vaniukov
Colour Your Blog to Maximize Readability - Glenda Watson Hyatt
Considering Colour Blindness in UX Design (with five examples) - Lizzy Hillier
Creating Accessible Digital Colour Palettes Using the 60-30-10 Design Rule (2024) - Josh Crawford
CSS Color
- Always Specify A Background Colour - Christopher Hester
- If You Pick One Color, Pick Them All - Olivier Thereaux and Susan Lesch
First Impressions of Forced Colors Emulation - Melanie Richards
Demystifying the APCA (Advanced Perceptual Contrast Algorithm) (Video) (2024) - James Sullivan
Design and Accessibility - Use of Colour - Gian Wild
Design Patterns and Examples for Colour Blindness - Roger Johansson
Designing For (and With) Color Blindness - Aaron Tenbuuren
Designing in a Colour Blind World - Scott Forsyth
Designing with the Colorblind in Mind Will Improve Your Design for Everyone - Tom van Beveren
Does Stripping Your Blog of Colour Leave It Readable? - Glenda Watson Hyatt
Escaping the sRGB Prison (Video) - Chris Lilley
F-M 100 Hue Test - Compare Your Result with Others - Daniel Flück
Figure It Out - Stephen Anderson and Karl Fast
Firefox's Accessibility Picker - Sime Vidas
From A Colourblind Designer To The World: Please Stop Using Red And Green Together - Andrew Wilshere
How to Check for Accessible Colors (Video) - Rob Dodson
How to Make Your Charts More Accessible with Color Blind Friendly Palettes - Rachel Cravit
How to Pick the Least Wrong Colors - Matthew Ström
Hue, Saturation, Lightness - Jon Hicks
Importance of Color Accessibility - Greg Kraus and Wayne Dick
Inclusive Color: from Photons and Physiology to Psychology and Philosophy (Video) - Sarah Brodwall
Is Your Website Colorblind Friendly? - Hello World Design
Learn More About Color By Working In Grayscale - Steven Bradley
Link Colors and the Rule of Tincture (2023) - Theresa O'Connor
Map Accessibilty Survey for Colorblind People - Daniel Flück
More Attractive, Engaging, Accessible: How To Use Color With Intention - Jennie Delisi
Never Rely on Color Alone - Elaine Lau, Ellen Liebert, Linda Bradley, Matthew Russell, Rachael Bradley Montgomery
New Release of Color Blindness Simulator - Daniel Flück
Okay, Color Spaces (2024) - Eric Portis
Oddities in Color Perception - Alastair Campbell
Open Color - heeyeun
Reproduction of Color Images for Monochromats and Dichromats (PDF) - Karl Rasche, Robert Geist, and James Westall
Random A11y Color Palettes - John Otander and Adam Morse
Simple Patterns for Separation (Better Than Color Alone) - Chris Coyier
Specify a Text Colour for img Elements - Roger Johansson
Support Information Conveyed by Color with Text - Denis Boudreau
Styles for Checking Color Reliance - Jared Smith
The Guide To Windows High Contrast Mode - Cristian Díaz
The Possibilities of the color-adjust Property - Eric Bailey
Understand, Test, Solve: Color Contrast (Video) - Aaron Farber
Understanding SC 1.4.1 Use of Color - Raghavendra Satish Peri
Use of Color in Mobile Applications - Chris McMeeking, Alistair Barrell, and Jennifer Dailey
Using Color Theory to Improve Website Accessibility - Julia Blake
So Many Color Links - Chris Coyier
Supporting Users Who Change Colours on GOV.UK - Nick Colley
Styling Links and Buttons (2023) - Adrian Roselli
The Saga of Accessible Colors (Video) - Ted Drake
Tools for Testing Color & Contrast for ADA/WCAG Compliance (Video) - Adage Technologies
Using Color to Enhance Your Design (Video) - Kelley Gordon
We are Colorblind - Tom van Beveren, Kim van den Brink and Denver the Cat
Well Color Us Surprised - This SC Can Be a Tricky Customer - Ian Lloyd
What are Color Gamuts? - Chris Lilley
Why Luminance Is the Key Component of Color - Steven Bradley