Wolfram Language Paclet Repository
Community-contributed installable additions to the Wolfram Language
Designing Accessible Color Schemes
Color choices that look fine to one reader can be illegible to another. The Web Content Accessibility Guidelines (WCAG) make legibility measurable through a contrast ratio between a foreground and a background color. AccessibleColors brings that measure to the Wolfram Language and builds a few practical tools on top of it. This tech note walks through a typical workflow: measure contrast, read off a conformance level, pick legible text, and repair a color that falls short.
Measuring Contrast
returns a number from 1 (the two colors are identical) to 21 (black on white). It depends only on relative luminance, so it is symmetric in its two arguments.
In[1]:=
 | WCAGContrastRatio |
Out[1]=
21.
A mid gray on white is far weaker:
In[2]:=
| WCAGContrastRatio |
Out[2]=
3.97665
Reading Conformance Levels
Raw ratios are easier to act on as WCAG levels. buckets a pair into or using the 4.5 and 7 thresholds for normal text, and returns a (carrying the ratio it fell short by) otherwise:
"AAA"
"AA"
Missing["BelowThreshold",...]
In[3]:=
AssociationMap
[#,White]&,{Black,GrayLevel[0.3],Gray,LightGray}
 | WCAGLevel |
Out[3]=
Large text is held to looser thresholds, which the option selects:
"LargeText"
In[4]:=
[Gray,White],
[Gray,White,"LargeText"True]
 | WCAGLevel |
| WCAGLevel |
Out[4]=
{Missing[BelowThreshold,Ratio3.97665,Minimum4.5],AA}
Choosing Legible Text
Given a background, returns whichever of black or white contrasts with it more strongly, so labels stay readable on any swatch:
In[5]:=
RowTableFramedStyle"Ag",
[bg],18,Backgroundbg,FrameMargins8,{bg,{LightBlue,Darker[Red],Yellow,RGBColor[0.1,0.1,0.4]}}
 | AccessibleTextColor |
Out[5]=
Ag
Ag
Ag
Ag
Repairing a Color
When a chosen color is too weak, nudges it toward black or white until it just clears the target ratio (AA by default), leaving the hue as intact as it can:
In[6]:=
before=Gray;after=
[before,White];after,
[after,White],
[after,White]
| AdjustForContrast |
| WCAGContrastRatio |
| WCAGLevel |
Out[6]=
Asking for the stricter AAA threshold pushes it further:
In[7]:=
| WCAGContrastRatio |
| AdjustForContrast |
Out[7]=
7.
Together these four functions cover the everyday accessibility loop: measure, grade, choose, and repair.
 |
|
""