It’s time for a more sophisticated color contrast check for data visualizations
The WCAG contrast requirements are flawed. Here’s what a new approach could mean for data visualizations.
Designing accessible color systems
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. With this in mind, we recently updated the colors in our user interfaces to be more accessible.
WCAG 2 and APCA contrast checker | Atmos
Check WCAG 2 and APCA contrast between colors in HEX, RGB, HSL, and LCH.
Color Easily
Color Easily is the easy way to generate and visualize your color palettes, APCA contrast checker.
Leonardo
Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.
APCA: the new algorithm for accessible colour contrast
APCA provides a more accurate estimation of human contrast perception. As a result, it considers as valid colour combinations that we know work but that WCAG 2 rejected, and viceversa.
ColorBox
Pioneered a the way to design & create accessible color sets. It was nominated for Product Hunt’s Golden Kitty for best tool in 2018.
Inclusive Dark Mode: Designing Accessible Dark Themes For All Users
Dark mode isn’t just a trendy aesthetic. It’s a gateway to more inclusive digital experiences, but only if designed thoughtfully. While its sleek visuals and reduced eye strain appeal to many, poorly implemented dark themes can alienate users with visual impairments, causing readability issues like blurred text or harsh contrasts.
Discover how to craft dark modes that don’t just look good but work for everyone, from those with light sensitivity to machine learning algorithms. Learn why offering customization and embracing adaptability can transform dark mode from a design trend into a universally empowering tool.
FREETONE (Figma)
“FREETONE by Stuart Semple contains 1280* colours including digital versions of his Pinkest Pink, Incredibly Kelinish Blue, Black 3.0 and TIFF.
The Easy Intro to the APCA Contrast Method
Visual readability is a key part of web content, affecting 99% of internet users. For years, the WCAG 2.x contrast standard provided basic guidance for designers. Today, WCAG 2.x contrast is out of step with modern technology, and needs a replacement. Here is an overview of the need for this change, and the candidate replacement.
Contrast tools
The Advanced Perception of Color Algorithm (APCA) considers the context in which colors are used to determine their readability. Font size, font weight, and the sequence of background and text colors all impact the recommended contrast value (Lc) for text.
APCA Accessible Colour Contrast Checker
Whereas the WCAG 2 standards test two colours for accessibility based merely on the contrast between the two, the new Accessible Perceptual Contrast Algorithm (APCA) calculates contrast based on the luminance of the colours which differ based on the foreground versus the background colour, the font size and the font weight.
ROYGBIV
ROYGBIV is an acronym for the sequence of hues commonly described as making up a rainbow: red, orange, yellow, green, blue, indigo, and violet.
Colour Contrast Analyser
Use TPGi’s free color contrast checker to optimize your content – including text and visual elements – for individuals with color-blindness or low vision impairments.
Available for Windows and Mac.
hue.tools
Simple toolbox for working with colors. Color mixing, blending, conversion, modification, detailed information, etc.
The Hydrant Directory
The Hydrant Directory is a free design resource created from public infrastructure. Each hydrant has been processed into color palettes for free use by artists and designers.
Persistence of vision
Persistence of vision is the way your eyes and brain hold onto an image for a split second after you stop looking at i
Munsell colour system
It defines colours by measured scales of hue, value, and chroma, which correspond respectively to dominant wavelength, brightness, and strength or purity.
What Are Web Safe Colors?
In the past, computer monitors were only capable of displaying up to 256 of the 16 million available colors. Therefore, a list of 216 web safe colors was created so developers could know what colors would be compatible with all types of displays.
Color Names
Modern browsers support 140 named colors. Use them in your HTML and CSS by name, Hex color code or RGB value.
Explore our color library and immerse yourself in over 100+ different shades (+ codes!) from beige to burgundy, viridian to vermillion, and everything in between.
Web Safe Color Chart
Web safe colors emerged during the early era of the internet; a standardized palette of 216 colors that displayed consistently across all major browsers.
RAL color chart USA
The RAL Color chart, or the “RAL colors”, is a specialized chart created by the RAL Color Institute to display different colors of paint, powder, varnish, plastics, etc.
Fix Color Contrast
In this article and video you will learn what’s crucial and required about color contrast. You get practical examples, how to meet accessibility standards for your next web or UI design project.
Color and Contrast
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Intro to colour contrast
Colour contrast makes a big part of the user experience for all users. Accessibility guidelines however, are not always easy to follow. In this article we will see how to meet the requirements with practical examples.
Accessible color palette generator
Discover beautiful color combinations your whole audience can appreciate and follow Web Content Accessibility Guidelines (WCAG) with ease.
Accessible Brand Colors
This tool shows you how ADA compliant your colors are in relation to each other (contrast grid).
Tailwind CSS Color Generator
Instantly create stunning color scales by entering a base color or hitting the spacebar.
OKLCH Color Palette Generator
Generate harmonious color palettes with precise control using OKLCH color space.
OKLCH in CSS: why we moved from RGB and HSL
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.
OKLCH, explained for designers
OKLCH is a new color space that improves design and development with a wider color gamut. Learn why it’s the new standard for web colors.
Accessible Color Palette Generator
This is a tool to automate the generation of accessible enterprise UI color palettes.
Does Your Product Actually Need Dark Mode?
Irrespective of whether a design system officially supports dark mode, it’s very likely certain components will need to be rendered on dark backgrounds. So an inverted convention may be in place even if true dark mode isn’t supported.
Points of view: Color blindness
The palette of eight colors shown in Figure 2 has good overall variability and can be differentiated by individuals with red-green color blindness.
Color Blindness Facts & Statistics
Blue color blindness (often referred to as blue yellow color blindness) is extremely rare, so rare that only 5% of color blind people suffer from it.
Genome Color Tool
Genome Color Space is an Open-Source Color Tool for Color Systems. It was created to be Simple, Effective, Universal, Extensible, and WCAG Compliant. Its purpose is to help designers create brand-specific Color Systems from existing style-guides and easily facilitate white-labeling at scale.
Grayscale Color Palette with Equal Contrast Ratios
Ever needed a grayscale color palette for different surfaces, shadows, or states in your web app? I created a little utility to generate such palette.
EightShapes Contrast Grid
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
Gradient Generator
Your design tool is making your gradients look worse 😬. Whenever you try to create a gradient across a wide range of hues in Figma, Photoshop, etc, you often will see a gray dead zone in the middle of your gradient
Hex Color – The Code Side Of Color
Name a color, and you’re most likely to give a misleading impression. But, when computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. Don’t let the code intimidate you. With a little creativity, hex colors are a tool at your disposal.
Using Color to Enhance Your Design
To support the user experience, colors need to be combined wisely so that they work together well, do not overwhelm, and communicate the same kind of information everywhere in the interface.
Paletton
Paletton is a color scheme designer tool that helps users create, save, and export harmonious color combinations for websites, graphics, and design projects.RetryClaude can make mistakes. Please double-check responses.
Are My Colours Accessible
Why? Well, apart from being an excuse to use a domain name, colour contrast and the use of colour is extremely important for certain groups of people with varying levels of visional impairment.
A11Y – Color blindness empathy test
Build to help designers and developers to understand color blindness and visual imparity.
The User Experience And Psychology Of Colour
The article discusses the psychology of color in user experience design, focusing on how different colors are conventionally associated with failure and success messages in web interfaces, and why following these conventions is important for user clarity.
Realtime Colors
Visualize your color choices on a real website for designing, developing, and creating a brand style guide.
Color Wheel | Sessions College
Use the free Color Calculator to try different colors for your project. Choose your base color(s) and color harmony to create a color palette.
WebAIM: Contrast Checker
Online tool that helps ensure text and background color combinations meet accessibility standards by measuring contrast ratios against WCAG guidelines.
Colours for Accessibility: A mini Case Study
Florencia shares her experience in creating an accessible color system.
Color Palette App
Color Palette App is the first (free!) color palette generator designed specifically for UI designers. Use it to quickly create harmonious palettes perfect for modern interfaces and deliver designs that impress every time.
Pigment by ShapeFactory
A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off your next project.
WhoCanUse
Tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
Color | UX Library
Learn more about the influence of color, typography & icons from the list of articles we have curated for you.
Making Accessible Color Combos
Dive into this collection to understand deeper on how to create accessible colors and seamlessly integrate with your design system.
a11y-color-tokens (github)
Generate accessible complementary text or UI colors as Sass variables and/or CSS custom properties from your base color tokens.
Reasonable Colors
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
