accessible design
https://www.compliancesheriff.com/
The web is a primary method for delivering information to customers, constituents, patients, partners, employees, shareholders and more. Your team of content developers contribute and improve your websites, yet are they considering accessibility? You probably have more hidden risk than you realize and it’s growing exponentially every day as content is added, uploaded and changed.
https://accessibe.com/examples?gclid=EAIaIQobChMIxJnDuLfR5QIVhyCtBh2Qpwo6EAAYASABEgLZG_D_BwE
accessiBe is an Automatic AI Solution for Web Accessibility & Compliance with WCAG 2.1 AA Level and US Section 508, Americans with Disabilities Act (ADA) and European Union Standard EN 301549
color.adobe.com
Adobe Color
A color palette tool that includes an accessibility feature to check for colors that are color blind safe.
paletton.com
Paletton
Includes website, artwork, and animation examples to test out color combinations through a vision simulator.
color.mediaandme.be
Color Tester by MediaAndMe
A tool for web designers that includes a “create palette from picture feature” and a WCAG color contrast checker.
coolors.co
Coolors
A website and desktop and mobile application that includes a color contrast checker.
colorsafe.co
Color Safe
Generates color combinations based on WCAG guidelines and includes a WCAG color contrast checker.
dasplankton.de/ContrastA
Contrast-A
An application without pre-generate color combinations and includes a color contrast checker.
cloudflare.design/color
Cloudflare.Design
A color palette website that analyzes and compiles color palettes from websites, generates accessible color combinations, and includes a color contrast checker for text and icons.
toolness.github.io/accessible-color-matrix
Accessible color palette builder
A color palette builder that generates accessible color text on color background combinations.
Abc.useallfive.com
Accessible Brand Colors
Accessible color palette builder that checks for WCAG compliance levels through a grid.
colormind.io
Colormind
A deep learning color scheme generator.
material.io/resources/color/#!/?view.left=1&view.right=0
Color Tool by Material design
UI color palette generator that includes an accessibility checker.
Clrcs.cc/a11y/
Colors
90 pre-generated color combinations, each with contrast ratio values.
webaim.org/resources/contrastchecker
WebAim Contrast Checker
WCAG official color contrast checker that includes a weblink contrast checker to evaluate accessible link colors.
contrastchecker.com
Contrast Checker
A color contrast checker that provides a grayscale simulation for color luminance.
coolors.co/contrast-checker/244161-314c68
Coolors
A contrast checker in accordance to WCAG guidelines.
accessible-colors.com
Accessible Colors
Includes font size and weight customization to measure accessible colors.
contrasteapp.com
Contraste App
A desktop application to that measures color contrast directly on desktop screen.
developer.paciellogroup.com/resources/contrastanalyser
Colour Contrast Analyser (CCA)
A desktop application that calculates color contrast and evaluates colors through WCAG
whocanuse.com
Who Can Use
A WCAG color contrast evaluator that includes cataracts, glaucoma, low vision, and situational vision event simulations.
accessibility.oit.ncsu.edu/tools/color-contrast/index.php?colors=000000,00ff00
NC State University IT Color Palette Accessibility Evaluator
Allows input of multiple RGB color codes and inverts colors for further evaluation.
contrast-grid.eightshapes.com
Contrast Grid
Creates a grid format that allows color value inputs to generate multiple color fields.
contrast-finder.tanaguru.com
Tanaguru Contrast Finder
Tests and generates accessible color contrasts and color distance for each pair of color combinations.
contrast-ratio.com/
Contrast Ratio
Simple interface for measuring contrast ratio
usecontrast.com
Contrast – Color Accessibility
A paid downloadable application that evaluates color contrast real-time on-screen applications.
Hexnaw.com
Hex Naw
Hex values color tool that allows adding color palettes to check for accessibility.
colorable.jxnblk.com
Colorable
Contrast checker for colored type on background color.
learnui.design/tools/accessible-color-generator.html
Accessible Color Generator
Contrast checker that generates solutions for non-accessible color combinations.
Color.review
Color.review
Website & application that generates real-time example of color text on background based on selection.
colorific.darrellhanley.com
Colorific
Color contrast checker that generates CVD simulation results.
color-blindness.com/colbis-color-blindness-simulator
Colbis – Color Blindness Simulator
Website that simulates CVD filters to uploaded images.
colororacle.org
Color Oracle
A simulator application that applies CVD color filters to desktop screen. (Windows, PC, Mac)
michelf.ca/projects/mac/sim-daitonism
Sim Daltonism for Mac
A Mac application that displays filter windows that simulate CVD
toptal.com/designers/colorfilter/
Colorblind Web Page Filter
A CVD simulator for evaluating websites
Color Contrast: Y Tri-Stimulate Your Color
By Professor John T. Drew
California State University, Fullerton
Professor Sarah A. Meyer
Cal poly Pomona
The theories of color used by designers on a day-to-day basis are related to the way in which human perception takes place. They can be categorized into three major groups: additive, subtractive, and three-dimensional color theory. Each theory holds part of the answer to how color is formed, used, and perceived by humans. Most everyone today is familiar with subtractive and additive color theories. Therefore, the primary focus of this article is on three-dimensional color theory and its practical application within the field of graphic design and/or visual communications.
Three-Dimensional color theory deals with the source (illumination--be it the sun, or any artificial light source), the object (reflectance off any object), and the observer (how humans perceive light and transform it into the objects we see).
Source
In measuring light waves by instrumentation, The International Commission of Illuminants has established standard light sources identified as Sources A, B, C, and D65. The operating color temperature of Source A is 2854K and is similar to a tungsten-filament lamp; Source B is 4800K and is equivalent to noon sunlight; Source C is about 6500K and is the equivalent of average daylight. Source D65 as a color temperature of 6500K with alternatives at D55, D50, D75, and D93. D55 has a color temperature of 5500K, D50 5000K, D75 7500K, and D93 9300K. D50 and D65 are the U.S. and European standards for measuring color. Color cannot be measure without some type of standard light source. In fact, almost all objects on earth have no color. It is only the light that is reflected off an object that gives the object it’s color.
Object
The second triadic component in three-dimensional color theory is the object, and this is where simple subtractive color theory typical ends within design educational paradigms--the mixing of pigment on a control surface that is perfectly flat. What happens when light waves strike different surfaces?
A light wave travels through the air in a straight line. Only when interrupted by an object can it change its course, and the surface of the object determines the extent to which its course will change. If the object is smooth and mirror like, reflecting back all of the light in the opposite direction, the object is opaque. If light travels through an object uninterrupted, the object is transparent. Scattering occurs if light strikes an object with a rough surface, causing the wavelengths to reflect in many directions. When scattering is extensive, light is diffusely reflected-- can affect the chroma or the color itself.
There are many other factors that need to be considered when dealing with the object in three-dimensional color theory. For example, Lamberts Law, Beer’s Law and many other principles and terms that are too complex to discuss within this article. The object is inherently the most complex due to the multitude of factors, conditions, and circumstances. However, transparent, scattering, diffusely reflected, and opaque cover the basics for the purposes of this article.
Observer
The Standard Observer is a term used to describe the response of normal color vision. This standard was recommended in 1931, and again with modifications in 1976. This third component completes the triad that makes color three-dimensional in our environment.
The Standard Observer (x bar 10, y bar 10, and z bar 10) or the visual angle of 10˚ measures the response area of the tristimulus values (X, Y, and Z) on the back of the retina wall, and is the bases of the CIE system. This equation that represents the Standard Observer is directly related to the way color is seen by subjects with normal color vision. (It is important to point out at this time that we are talking only about the perception of color within the human condition, and not about the perception of form.) The tristimulus values are the amount of light the eyes see from the three primaries, red, green, and blue. In the CIE system, these three primaries are translated into numbers describing each test color. For instance, Pantone Matching System 250 C would have, for a standard observer of 10˚ with a light source of D65, tristimulus values of X 70.90, Y 68.11, and Z 79.93. Of these values, The Y tristimulus value represents the relative lightness to the minds eye, or how efficient the eye is in converting light into luminance sensation. Basically it is how we as designers can measure the eyes response to color, and therefore can predicted it's visual outcome. In summation, it is the Source X the Object X the Observer that equals the Y tristimulus values. And therefore it is the most important quantitative number a designer can use for predicting physical appearance of color within any given audience.
By using Y tristimulus value (as a tool), type and color combinations can be created whereby legibility issues can be immediately determined and corrected. Everyone knows the computer screen lies when dealing with print-based graphics. It is the nature of the beast. The computer screen deals with additive color theory (projected light, or the Source), and print-based graphics deals with subtractive color theory, both simple and complex (the Object). These two color spectrums do not match-- the subtractive color spectrum is inferior to additive.
So how should we as designers deal with this conundrum? By having a full understanding of three-dimensional color theory, and how to apply it to design. This includes the pragmatic use of the Y tristimulus value.
There are five basic rules for the practical use of the Y Tristimulus.
Rule 1: Calibrate your monitor. We would recommend the Eye-One Display 2, or any other professional monitor calibration equipment. You want to make sure that the device is accurate enough to calibrate print-based graphics. If it is capable of calibrating print-based graphics it can calibrate for the Web. We do not recommend calibration devices that are meant for home use or the Web-- such as the Pantone Huey. Although it is a useful device, it is not accurate enough for all the needs typically found within a graphic design studio.
All monitor calibration devices are meant to create a legitimate Standard Source, be it D50, D55, D65, or any other standard light source, and to create a color working space that emulates subtractive color such as U.S. Web Coated (SWOP) v2. In this case, Web does not refer to the World Wide Web, but refers to web press specifications.
Rule 2: In order for body copy to be legible for normal color vision, at a distance of 18” to 24”, (normal reading distance for books, magazines, brochures, and reports, ect.) you need a Y tristimulus value differential or color value differential (CVD) of 20%. This can be measured on the screen by using the Classic Digital Color Meter, and not the Digital Color Meter. The Classic Color Meter can measure the tristimulus values.
Rule 3: For the visually impaired 20/60 or greater you need a CVD of 40%. This rule applies not only to body copy, but also to any type/simple symbol color combination, including white and black, that is meant to be viewed at a distance.
Rule 4: The Y tristimulus value cannot predict simultaneous contrast and therefore optical verification is needed. Simultaneous contrast is most pronounced with an imbalance of large and small areas of color. A pronounced simultaneous contrast of color opposites causes an storbing effect within human perception. To safeguard against simultaneous contrast use the following:
- Add a portion of one color to the other by setting up a color matrix with 10% increments. This matrix allows you to determine the point at which simultaneous contrast does not affect the readability or legibility of the type and color combination in question.
- Tint the type and color combination in question with a third color; this also acquires the building of a type and color matrix.
- Shade the type and color combination with black to lessen the amount of simultaneous contrast, again building a type and color matrix.
- Combine all the above.
- Switched the type and color combination to a harmonious color palette—one that has an equal portion of one color running through both the type and color fields (for example, yellow type on a green background). This is harmonious because the amount of yellow is stable in both the foreground and background hues.
Rule 5: Once the computer monitor is properly calibrated for print-based graphics use the Classic Digital Color Meter. You can buy this program for $2.99—less than a couple coffee. In the pull down menu select tristimulus. Once you have selected the tristimulus feature you can scroll over any hue and get a reading. Remember, at a minimum you need a 20% Color Value Differential between two colors including black and white for it to be legible within the parameters of normal color vision. For the visually impaired it is 40%. To comply with the Americans With Disabilities Act the foreground hue must be 70% or greater, and the background hue must be 30% or less for permanent signage (wayfinding).
Rule 6: The Y tristimulus cannot predict the perception of form. It can only describe the human perception of color.
Form
Within three-dimensional color theory there is a second component to the observer—the human perception of form. This can be broken down into the simple, complex, and hyper-complex photoreceptor fields. Simple photoreceptor cells are parallel to one another and work best with moving stimuli. Complex photoreceptor cells respond best when an object is properly oriented, and are responsible for defining moving slits, edges, dark bars, and help humans to interpret shape, contour, and the mass of an object. Hyper-complex photoreceptor cells respond most favorably to moving objects that behave with a set direction and definite position and pattern. Simple, complex, and hyper complex photoreceptor fields process visual information that is sent to the primary visual cortex by the eye. These receptor fields respond to any stimuli that are large enough for the mind’s eye to perceive, and all three work in tandem to define form.
In 1862 Herman Snellen, MD devised a system for determining the accuracy of human perception. As one of the pioneers of ophthalmology, he is credited with inventing a field test known as the Standardized Eye Chart. This test is still used to determine whether an individual needs corrective eyewear. The Standardized Eye Chart has been deemed scientifically accurate by the field of ophthalmology, and millions of individuals see normally, with corrected eyewear due to its accuracy. The Standardize Eye Chart consists of 20/20 (normal eyesight), 20/25, 20/30, 20/40, 20/50, 20/70 (visually impaired), 20/100, and 20/200 (legally blind). Each standardized eyesight found on this chart has its own visual angle. Furthermore, each typeface constructed or used by a designer creates its own unique visual angle, and therefore basic rules of thumb do not accurately predict the distance at which an object or typeface can be seen from a distance. Each is unique.
In conclusion, the problem for designers has always been how small, big, near, far, what does it mean, and what color should an object be for it to be legible. All design disciplines have developed rules-of-thumb for placing an object in an environment for viewing at a distance. However, these are highly inaccurate and can leave a designer with a nonfunctional structure-- so at a minimum, Y tristimulus your colors.
Over the years I have seen students struggle with understanding the color contrast needed for something to be legible. It looks good on the screen, but once printed out the design is illegible. Most do not understand the ramifications of the source, object, observer, and how each plays a significant role in how humans see color. The best way to predict color legibility is to use the Classic Digital Color Meter. If there is not a 20% CVD between hues it will probably be ill-legible when it is printed out, no matter the quality of the printer or printing press.