BabelColor ®
Color Measurement and Analysis
previous previous screenshots home screenshots home next next previous previous screenshots home screenshots home next next

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.
About BabelColor / Contact / Legal info / Privacy policy Copyright © 2024 The BabelColor Company
BabelColor ®

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.
previous previous screenshots home screenshots home next next
About BabelColor / Contact us - Legal info - Privacy policy Copyright © 2024 The BabelColor Company