White text is often used to provide good contrast against dark backgrounds. When specifying white text in HTML and CSS, the color is defined using RGB or hexadecimal color values that correspond to the color white.
RGB Color Model
In the RGB color model, colors are defined by specifying levels of red, green and blue light. The RGB value for pure white is (255, 255, 255). This means a maximum intensity of red light, a maximum intensity of green light, and a maximum intensity of blue light are combined to create the white color.
RGB values range from 0 – 255 for each component color. By setting the red, green and blue values to their highest value of 255, the result is a bright white color.
Hexadecimal Color Values
Hexadecimal color values are a way to specify colors using hexadecimal digits 0-9 and A-F. White is represented by the hexadecimal value #FFFFFF. This is because:
- FF in hexadecimal is equivalent to the decimal number 255
- White requires the maximum amount of red, green and blue
- FF therefore needs to be specified for red, green and blue to get white
Hex values are preceded by a # symbol and specified in RGB order (red, green, blue). Hexadecimal provides a convenient way to write RGB values in a shorter form than decimal.
Specifying White in HTML and CSS
To make text white in HTML, the color style can be set to white using hexadecimal or RGB values:
<p style="color: #FFFFFF;">This text is white</p> <p style="color: rgb(255, 255, 255);">This text is also white</p>
For CSS stylesheets, white text can be defined by targeting elements and setting the color property:
p {
color: #FFF;
}
h1 {
color: rgb(255, 255, 255);
}
This will make all <p> elements have white text color and all <h1> elements have white text.
Web Safe Colors
The web safe color hex value of #FFFFFF guarantees white will be displayed properly on any computer monitor. Other off-white shades like #F8F8FF (ghost white) and #FAFAFA (snow) are also considered web safe.
Web safe colors use hexadecimal values made up of 3 sets of duplicates like FF, CC, 99, 66, etc. This ensures the colors will look accurate on displays with different color capabilities.
Accessibility Considerations
White text on a black background provides extremely high contrast. Black text on a white background also provides strong contrast. High contrast is important for accessibility for those with visual impairments.
However, pure white (#FFFFFF) text on a pure black (#000000) background can be harsh on eyes during long periods of reading. Off-black and off-white shades can help reduce eye strain while still providing sufficient contrast.
The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text. White on black provides a contrast ratio of 21:1, far exceeding minimum recommendations.
When to Use White Text
Here are some examples of effective uses of white text:
- Light text on a dark background
- Text on image backgrounds to ensure readability
- Emphasized text to make it stand out against colored backgrounds
- Headings and titles to make them prominent
- Text on dark navigation bars and menus
Areas with heavy text usage, like paragraphs and articles, are sometimes better served with black text on a white background. But judicious use of white text can be high contrast and visually appealing.
Other Light Text Colors
Besides pure white, other light tints can provide good contrast with dark backgrounds:
| Color | Hex Value | Contrast Ratio (with #000000) |
|---|---|---|
| White | #FFFFFF | 21:1 |
| Snow | #FFFAFA | 20:1 |
| Floral White | #FFFAF0 | 19:1 |
| Lavendar Blush | #FFF0F5 | 17:1 |
| White Smoke | #F5F5F5 | 16:1 |
These colors can be used in place of pure white for text depending on design needs. A contrast ratio of at least 4.5:1 is recommended by WCAG for accessibility.
Other Options for Light Text
For text on dark backgrounds, white or light tints provide the best contrast. But for some creative designs, other lighter colors can work using the following:
- Increase font size and weight for enhanced readability
- Use the lighter colors sparingly and intentionally
- Apply a text shadow or outline for greater separation from the background
- Use a monochromatic palette where the text color is the lightest tint from the background color
Care should be taken to ensure text remains easy to read. But lighter greens, blues, pinks, etc can work if boldness and readability are emphasized in the design.
Conclusion
White text provides strong visual contrast on dark backgrounds. In HTML and CSS, the color white is defined using hexadecimal #FFFFFF or RGB rgb(255,255,255). White text enhances readability, enables high contrast for accessibility, and allows text to stand out prominently.
Other light tints can also work well. When using lighter colors, ensure sufficient contrast through font styling and avoid colors that strain the eyes. White text adds visual appeal and clarity to any design.
