Color Measurement
and Analysis
CT&A RGB vs RGB
WCAG text Contrast Ratio
On the right of the RGB vs RGB window, we see patches of the two selected colors, defined in the Space #1 and Space #2 sections of the
window, on white and black backgrounds, as well as on a background of the other color. Below the patches, we see text presented with the
same color combinations.
The color-on-background combinations of the patches and text are used to compute a Contrast Ratio defined by the Web Content
Accessibility Guidelines (WCAG), a ratio helpful in analyzing the legibility of colored text. Please consult the CT&A Help manual for the equation
defining the ratio and for the minimal value of each requirement.
The Contrast Ratio for each combination is shown in a label superimposed on the patches backgrounds, in which label you will also find the
“AA” and “AAA” symbols corresponding to the level requirements, in either red or green. A label example is shown below; it corresponds to the
Space #1 color on white:
The “AA” and “AAA” symbols of the first line respectively indicate if this contrast meets or not the Minimum and Enhanced contrast
requirements for Normal text. The symbols of the second line indicate similar compliance for Large text. Large text is defined as:
•
regular text, 18 points or larger, or
•
bold text, 14 points or larger.
In our label example:
•
the Contrast Ratio is 3,1 to 1;
•
this color pair does not meet the Minimum and Enhanced contrast requirements for Normal text (“AA” and “AAA” are red);
•
this color pair meets the Minimum requirements for Large text (“AA” is green) and fails the Enhanced requirements for Large text (“AAA”
is red).
The two red or green vertical bars on the left of each text box indicate if the text, as shown, meets the WCAG requirements. The first bar
corresponds to the Minimum contrast (Level AA), and the second bar corresponds to Enhanced contrast (Level AAA). Since the text can be
either “Normal” or “Large”, as written in the text box first line, only two bars need to be shown at any given time. The text content, as well as
the font name, style, and size can be selected with a popup menu, shown below. You can directly assign one of the two minimal requirements
for Large text, with the result shown in the last screenshot. You will notice that the colors of the vertical bars have changed to match the colors
of the “AA” and “AAA” symbols shown in the screenshot at the top of this page.