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:

CSS

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

https://www.w3.org/TR/WCAG20-TECHS/G18.html

https://www.w3.org/TR/WCAG20-TECHS/G145.html