On each web page, are CSS declarations for element background colors and font colors used correctly?
A user activates Windows high contrast mode or installs an extension like Comfort+. The browser then replaces the site's colors with its own values — but only if those colors are declared in coherent pairs. If your CSS defines color: white on text without defining background-color, the browser may retain its default white background: white text on white background, unreadable.
This criterion does not measure contrast — that is the role of criteria 3.2 and 3.3. It only verifies that colors are declared in pairs. Whenever you define color on an element, background-color must be defined on that same element or explicitly declared on an ancestor. The rule is symmetrical: background-color without a corresponding color presents the same problem. Black text on black background would be compliant with 10.5 but non-compliant with 3.2.
Test 10.5.3 covers a distinct case: text placed over a background-image. If the image fails to load — slow network, data saver mode, file deleted from server — the text must remain readable on the bare background. Always declare a fallback background-color on the element bearing the background-image.
For form fields (<input>, <select>, <textarea>), the rule is strict: any color declaration must be accompanied by a background-color declaration, and vice versa. These elements inherit colors less reliably from parent elements across browsers.
3 tests to check the correct implementation of colors in CSS
background-color associated with each color
For each text whose color is customized by the site (excluding default browser colors, like blue links) :
- Identify the element containing this text.
- Open the code inspector (F12), Computed tab.
- Verify that
background-colordisplays a computed value from the site's styles.transparentdeclared explicitly is a valid value. - If the computed value is present in the site's CSS rules, the test passes. If the property is not declared in the site's CSS, the test fails.
color associated with each background-color
For each text whose color is customized by the site (excluding default browser colors) :
- Identify the element containing this text.
- Open the code inspector (F12), Computed tab.
- Verify that
colordisplays a computed value from the site's styles. - If the value is present in the site's CSS rules, the test passes. Otherwise, the test fails.
Readability on background-image without image
For each text whose background uses a background-image :
- Locate the element bearing the
background-image(hero section, promotional banner, product card). - In the inspector, temporarily remove the
background-imagedeclaration or disable image loading (DevTools > Network > block images). - Verify that the text remains readable without the image. A fallback
background-colormust be declared on the element. - If the text remains readable on the bare background, the test passes. If the text disappears or becomes unreadable, the test fails.
Examples
❌ Non-compliant : Text color without associated background
<style>
.alert-message {
color: #b91c1c;
/* background-color absent */
}
</style>
<p class="alert-message">Your session expires in 5 minutes.</p>The red color is defined on the text, but no background-color is declared. When the user activates a high contrast theme, the browser may impose a dark background in place of the page background — and retain the red text: unreadable. Test 10.5.1 fails because no computed value is available for background-color in the site's styles.
✅ Compliant : Text color with explicitly declared background
<style>
.alert-message {
color: #b91c1c;
background-color: #fef2f2;
}
</style>
<p class="alert-message">Your session expires in 5 minutes.</p>Both properties are declared as a pair. The browser has both text color and background color available to replace them consistently during user customization. Tests 10.5.1 and 10.5.2 pass.
❌ Non-compliant : Background image without fallback color
<style>
.hero {
background-image: url('hero-photo.jpg');
padding: 4rem 2rem;
}
.hero h1 {
color: #ffffff;
}
</style>
<section class="hero">
<h1>Discover our new collection</h1>
</section>If hero-photo.jpg fails to load, the section displays the browser's default white background. The white title becomes invisible. No fallback background-color is declared: test 10.5.3 fails.
✅ Compliant : Background image with fallback color declared
<style>
.hero {
background-image: url('hero-photo.jpg');
background-color: #1a3a5c; /* Fallback if image is absent */
padding: 4rem 2rem;
}
.hero h1 {
color: #ffffff;
}
</style>
<section class="hero">
<h1>Discover our new collection</h1>
</section>The dark blue background-color ensures the white title remains readable even if the image fails to load. The browser displays the blue background in place of the missing image. Test 10.5.3 passes.
Tips and pitfalls
⚠️ 10.5 compliant does not guarantee readability
This is the most common audit mistake: color: #000; background-color: #000 is compliant with criterion 10.5 (both values are declared) but produces invisible text. Contrast is evaluated separately by criteria 3.2 (body text) and 3.3 (interface components). Do not mark 10.5 as validating readability.
⚠️ Tailwind or Bootstrap utility classes without background counterpart
Classes like text-white or text-red-600 define color without background-color. On an element whose background is not declared elsewhere in the site's styles, test 10.5.1 fails. Always pair each text color class with a background class or an explicit background-color: transparent declaration.
💡 Declare background-color: transparent explicitly
For color redefinitions on elements whose background is already defined by an ancestor, add background-color: transparent explicitly. The inspector will then display a computed value for background-color in the site's rules — which validates test 10.5.1. Without this declaration, the property may not appear in the site's styles at all.
⚠️ Pseudo-element ::before used as colored background
Some designs use ::before with background: #FF6600 positioned absolutely to simulate a background behind text. This is non-compliant: the background-color is on the pseudo-element, not on the element containing the text. The inspector will not find a computed value for background-color on the text element. Declare the background color directly on the element and reserve ::before for purely decorative effects.
⚠️ Default colors of native elements excluded from scope
The blue color of unvisited <a> links, the black text on white background applied by the browser by default are not in the scope of tests 10.5.1 and 10.5.2. The methodology explicitly excludes these default colors. Only colors declared by the site in its own stylesheets are in scope.
Frequently asked questions
What aspect of CSS colors does RGAA criterion 10.5 actually control?
No. Criterion 10.5 only verifies that colors are declared as coherent pairs — color with background-color. The contrast between these two values is evaluated by criteria 3.2 (body text, minimum ratio 4.5:1) and 3.3 (interface components, minimum ratio 3:1). Black text on black background is compliant with 10.5 but non-compliant with 3.2.
How do I check the computed value of background-color in the style inspector?
Open the inspector (F12), select the element containing the colored text, then go to the Computed tab. Look for background-color. What matters: that the declaration comes from a CSS rule of the site, visible in the Rules panel. rgba(0, 0, 0, 0) and transparent declared explicitly are valid values for this test.
Why doesn't background-color defined on the body cover all child elements?
background-color is not inheritable in CSS. Its default value is transparent, which visually allows you to see a parent's background — but the child element has no computed value from the site's styles. To be compliant, declare background-color: transparent explicitly on the child element that redefines color, or give it its own background color. Explicit declaration is the safest approach at project scale.
What RGAA rules apply specifically to form field colors?
Yes, the rule is stricter for <input>, <select> and <textarea>. Any color declaration must be accompanied by a background-color declaration, and vice versa — no exceptions. These elements receive variable native rendering across browsers and do not reliably inherit parent colors. The pair must be declared directly on the form element.
How do I efficiently audit RGAA criterion 10.5 across an entire web page?
Disable the page's CSS styles (in Firefox: View > Page Style > No Style) and verify that the content remains structurally readable. Then apply a user stylesheet forcing your own colors to verify that text remains readable. For formal auditing, inspect each element with customized text color in the Computed tab and verify the presence of a computed value for background-color in the site's rules.