There is too little contrast between this white text and the medium gray background. There is very good contrast between this white text and the black background. There is much too little contrast between this silver (#CCCCCC) text and the white background. There is too little contrast between this goldenrod text and the medium gray background. There is good contrast between this goldenrod text and the black background. There is much too little contrast between this goldenrod text and the white background. There is much too little contrast between this dark gray (#666666) text and the medium gray background. There is too little contrast between this medium gray text and the black background. There is too little contrast between this medium gray text and the white background. There is too little contrast between this charcoal gray text and the medium gray background. There is much too little contrast between this charcoal gray text and the black background. There is good contrast between this charcoal gray text and the white background. There is too little contrast between this indigo blue text and the medium gray background. There is much too little contrast between this indigo blue text and the black background. There is very good contrast between this indigo blue text and the white background. There is too little contrast between this black text and the medium gray background. There is sufficient contrast between this silver (#CCCCCC) text and the black background. There is excellent contrast between this black text and the white background. Tip-If the contrast is insufficient for legibility, you can select the text to read it. The following color combinations demonstrate various degrees of contrast and legibility, ranging from excellent to much too little contrast:
White text contrasts adequately with a charcoal gray (#333333) background. However, the non-Web-safe light gray (#EFEFEF) makes a good background color for black text. All Web-safe grays are too dark to serve as effective background colors for black body text. White (#FFFFFF) text on a blue (#0000FF) background.Īvoid using gray for text or symbols consisting of fine lines on a color background, because a successive-contrast effect causes them to take on the hue of their background color’s complement. The following color combinations provide good contrast and legibility:īlack (#000000) text on a cyan (#00FFFF) background.īlack (#000000) text on a yellow (#FFFF00) background.īlack (#000000) text on a pale thalo yellow green (#99FF99) background. Text that is in a color that contrasts well with an achromatic background of black, gray, or white or black or white text on a high-contrast, color background generally provides better legibility than when both text and background are in different chromatic colors-unless the two colors contrast greatly in both hue and value. When there is insufficient contrast between the hue or value of text and its background color, the text appears blurred or has a halo effect around it, making it difficult to read and resulting in eye strain. To provide the best legibility, ensure that text contrasts adequately with its background in both hue and value. Prussian blue (#003366) text on a white background.ĭeep burgundy (#660033) text on a white background.Ĭontrast with a Black or Dark Background While white text on a black background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background. Viridian green (#006633) text on a white background. Indigo blue (#330066) text on a white background. Navy blue (#000066) text on a white background.ĭeep burnt sienna (#660000) text on a white background. Slate (#333366) text on a white background.įorest green (#006600) text on a white background. Raw umber (#333300) text on a white background. Peruvian turquoise (#003333) text on a white background.ĭeep purple (#330033) text on a white background.
Midnight blue (#000033) text on a white background.īurnt umber (#330000) text on a white background.Ĭharcoal gray (#333333) text on a white background. Kashmir green (#003300) text on a white background. The following dark colors provide good to excellent contrast and legibility for text on a white background:īlack (#000000) text on a white background. The contrast between charcoal gray (#333333) text and a white background is about eighty percent-thus giving minimally good value contrast. Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text.
0 kommentar(er)
