Based on the provided reference, while dark mode itself doesn't dictate a single unique contrast ratio distinct from general accessibility guidelines, the standard requirements still apply. The reference highlights specific contrast ratios based on text size and notes a particular target for white text, which is frequently used in dark mode interfaces.
According to the provided information, the color contrast ratio should adhere to the following standards:
WCAG Contrast Requirements for Text
- Normal-sized text: Requires a contrast ratio of no less than 4.5:1.
- Large-scale text: Requires a contrast ratio of at least 3:1. (Large-scale text is defined as approximately 24px, or 18.5px if bold).
These are minimum requirements set by WCAG (Web Content Accessibility Guidelines) to ensure readability for users with various visual abilities. These rules apply regardless of whether the design is light mode or dark mode.
Special Consideration for White Text
The reference makes a specific note regarding white text, stating that you should aim for a 15.8:1 ratio when using white text. This is a significantly higher ratio than the minimums and is particularly relevant for dark mode designs where white or light-colored text is often placed against a dark background. While the 4.5:1 and 3:1 minimums still apply depending on text size, aiming for a higher contrast, especially with white text, can significantly improve legibility on dark backgrounds.
Summary of Contrast Ratios from Reference
Here’s a quick overview of the ratios mentioned in the reference:
| Text Type | Minimum Contrast Ratio | Special Note |
|---|---|---|
| Normal-sized Text | 4.5:1 | WCAG minimum |
| Large-scale Text | 3:1 | WCAG minimum |
| White Text | Aim for 15.8:1 | Recommended target |
In summary, for dark mode, you must meet the standard WCAG minimums of 4.5:1 for normal text and 3:1 for large text. Additionally, if you are using white text, the reference specifically advises aiming for a 15.8:1 contrast ratio for better readability.
