Provide Good Color Contrasts for Content
Accessibility is an important part of web design. By choosing the right colors, you can ensure that all visitors to your site can read your content. The user can change the color appearance of text in RadEditor"s content area using the ForeColor and BackColor tools. The W3C recommendations define three levels of conformance to their guidelines. Priority 1, 2 and 3. Their 2.0 color contrast algorithms utilize two of these-- Priority 2 (AA), and Priority 3 (AAA). Whether or not you need to reach an AAA conformance depends on your target audience.
You can find below examples of contents with various contrast ratios.
Content with contrast ratio, which passes at 3:1
| Text Color HEX | Background color: #000033 | Contrast |
|---|---|---|
| #C00 | Sample | 3.40 |
| #C03 | Sample | 3.45 |
| #C06 | Sample | 3.59 |
| #C09 | Sample | 3.84 |
| #C0C | Sample | 4.24 |
| #C0F | Sample | 4.78 |
Content with contrast ratio, which passes at 4.5:1
| Text Color HEX | Background color: #000033 | Contrast |
|---|---|---|
| #C60 | Sample | 5.22 |
| #C63 | Sample | 5.26 |
| #C66 | Sample | 5.40 |
| #C69 | Sample | 5.66 |
| #C6C | Sample | 6.05 |
| #C6F | Sample | 6.60 |
Content with perfect color contrast ratio, which passes at 7:1
| Text Color HEX | Background color: #000033 | Contrast |
|---|---|---|
| #6F0 | Sample | 15.14 |
| #6F3 | Sample | 15.19 |
| #6F6 | Sample | 15.33 |
| #6F9 | Sample | 15.58 |
| #6FC | Sample | 15.98 |
| #6FF | Sample | 16.52 |
Content demonstrating bad color contrast rating
| Text Color HEX | Background color: #000033 | Contrast |
|---|---|---|
| #000 | Sample | 1.05 |
| #003 | Sample | 1.00 |
| #006 | Sample | 1.14 |
| #009 | Sample | 1.39 |
| #00C | Sample | 1.79 |
| #00F | Sample | 2.33 |
Another way to apply color decoration to HTML content is through CSS stylesheet. Here is an example, which provides good color contrast based on CSS that can be applied to the content area of RadEditor:
body
{
font-size: 18px;
color: #99ff99;
background-color: #333333;
}
The tag above should be inserted in HTML view mode of RadEditor.
More information on color contrast
https://www.w3.org/TR/WCAG20-TECHS/G17