Intent intent of the WACG Contrast Ratio Criterion and Tests is to ensure there is enough contrast between text and its background so that it can be read by people with moderately low vision. Text that is decorative, and conveys no information is excluded. Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text sizes, or bold text is therefore lower. Text that is 18 point or 14 point, bold text is, judged to be large enough to require a lower contrast ratio.
The Contrast Ratio between text and background is calculated using a formula that gives a ratio from 1:1 (no contrast, for black text on a black background) to 21:1 (maximum contrast, for black text on a white background).
Levels of compliance range from:
Using the WACG formula and the calculated ratios, the threshold requirements are:
Therefore, once ratios for a color pairs are calculated test can be applied for:
The ratio tests are:
| Compliance Level | 'No' | AA | AAA |
| Normal Text | < 4.5 | 4.5 – 7.0 | > 7.0 |
| Large Text | < 3.0 | 3.0 – 4.5 | > 4.5 |
| Graphical Interface | < 3.0 | 4.5 – 7.0 | > 7.0 |
There are many sites for calculating color contrast ratios for a pairs of colors.
However, most of these only enable one pair to be checked at a time.
Smart Contrasts has adopted a different approach using an array or palette of colors. There are two options:
The advantage of this approach is that the user can see the results for a large number of colors. There are options for 256 colors (the so-called Safe Web Colors) and 4096 colors (the so-called Smart Web Colors). The palette is filtered to exclude any pair with ratios below 3.0. In each case the compliance categories ('No', 'AA', 'AAA') are shown displayed as colored text on top of a cell with the background color choice.
The options available are:
Back-for-Fore => User enters a background color for a palette of 256 text foreground colors
Back-for-Fore-4k => User enters a background color for a palette of 4096 text foreground colors
Fore-for-Back => User enters a foreground color for a palette of 256 background colors
Fore-for-Back-4k => User enters a foreground color for a palette of 4096 background colors
Note: The calculated ratio for a pair of colors is identical, irrespective of which one is on top, or underneath in the background. The options simply allow the user to choose the foreground color or the background color to test. The appearance will also be different.