Category: Expert Guide
What is the best practice for using box-shadow for accessibility?
# The Ultimate Authoritative Guide to CSS `box-shadow` for Accessibility
## Executive Summary
As a Data Science Director, I understand the paramount importance of creating digital experiences that are not only visually appealing but also universally accessible. In the realm of front-end development, CSS `box-shadow` is a powerful tool that, when wielded with intention and care, can significantly enhance user experience and adherence to accessibility standards. This guide provides an authoritative and in-depth exploration of best practices for using `box-shadow` with accessibility as the central tenet. We will delve into the technical nuances of the `box-shadow` property, analyze its impact on users with visual impairments and cognitive differences, and provide practical, actionable guidance supported by global industry standards. The objective is to equip developers, designers, and product managers with the knowledge to leverage `box-shadow` not just for aesthetics, but as a critical component of inclusive design.
## Deep Technical Analysis: Understanding `box-shadow` and its Accessibility Implications
The `box-shadow` CSS property allows you to add one or more shadows to an element. It accepts a comma-separated list of shadow definitions, each consisting of several values. Understanding these values is crucial for controlling how shadows affect visual perception and, consequently, accessibility.
### The Anatomy of a `box-shadow`
A single `box-shadow` value is composed of the following components:
* **`inset`**: An optional keyword that changes the shadow from an outer shadow (outset) to an inner shadow.
* **`offset-x`**: The horizontal offset of the shadow. A positive value moves it to the right, a negative value to the left.
* **`offset-y`**: The vertical offset of the shadow. A positive value moves it down, a negative value up.
* **`blur-radius` (optional)**: The blur radius. A larger value means more blur, making the shadow softer and more diffused. A value of `0` means no blur, resulting in a sharp shadow.
* **`spread-radius` (optional)**: The spread radius. A positive value expands the shadow in all directions, making it larger. A negative value shrinks it.
* **`color`**: The color of the shadow. This is typically specified using `rgba()` or `hsla()` for transparency, which is vital for accessibility.
**Example:**
css
.element {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* outset shadow */
}
.element-inset {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* inset shadow */
}
### Accessibility Implications of `box-shadow`
While `box-shadow` can visually elevate design, its misuse can create significant barriers for users. The primary concerns revolve around:
#### 1. Contrast and Readability
* **Low Contrast Shadows:** Shadows with colors that have low contrast against the background or the element they are applied to can make it difficult for users with low vision or color blindness to perceive the element's boundaries, depth, or interactive state.
* **Shadows Obscuring Content:** If a shadow is too dark, too large, or has insufficient blur, it can partially or entirely obscure the content within or behind the shadowed element, rendering it unreadable. This is particularly problematic for text or important visual cues.
* **Inconsistent Contrast:** Applying shadows inconsistently across an interface can create a jarring experience for users who rely on predictable visual cues for navigation and understanding.
#### 2. Visual Clutter and Cognitive Load
* **Overuse of Shadows:** Excessive use of shadows across an entire interface can lead to visual clutter, making it difficult for users to focus on essential content and interactive elements. This increases cognitive load, especially for users with cognitive impairments like ADHD or dyslexia.
* **Unnecessary Depth:** While shadows can imply depth, gratuitous or overly dramatic shadows can create a misleading sense of dimensionality that doesn't serve a functional purpose, distracting users from the content.
* **Flickering or Animated Shadows:** While not directly a `box-shadow` property, animations applied to shadows (e.g., on hover) can be problematic if they are rapid or distracting, leading to motion sickness or exacerbating conditions like vestibular disorders.
#### 3. Focus Indicators
* **Insufficient Focus Styles:** A common accessibility pitfall is relying solely on `box-shadow` for focus indicators. While a subtle shadow might be part of a focus style, it's rarely sufficient on its own. Users who navigate via keyboard (e.g., using the Tab key) *must* have a clear, visible indicator to know which element currently has focus. A faint shadow is often missed.
* **Shadows Interfering with Focus Styles:** If a `box-shadow` is applied to an element that also has a focus state, the shadow might either mask or dilute the focus indicator, making it harder to see.
#### 4. Screen Reader and Assistive Technology Compatibility
* **Non-Semantic Shadows:** `box-shadow` is a visual styling property. It has no inherent semantic meaning that can be conveyed to screen readers. While this isn't a direct problem, designers must ensure that the visual cues provided by shadows are supplemented by semantic HTML and ARIA attributes where necessary to convey information to users who cannot see the visual styling.
### Best Practices for Accessible `box-shadow` Usage
To mitigate these risks and leverage `box-shadow` for good, we must adopt a set of best practices:
#### 1. Prioritize Contrast and Legibility
* **Use Transparent Colors:** Always use transparent colors for shadows, typically with `rgba()` or `hsla()`. This ensures that the shadow doesn't completely obscure content. A common and effective approach is to use a near-black color with a low alpha value (e.g., `rgba(0, 0, 0, 0.1)` to `rgba(0, 0, 0, 0.3)`).
* **Adequate Contrast Ratio:** Ensure that the shadowed element's content maintains sufficient contrast against its background, even with the shadow applied. The shadow should be perceived as a subtle accent, not a barrier.
* **Test Against Various Backgrounds:** Shadows behave differently depending on the background color. Always test your `box-shadow` implementations against a range of background colors that might appear in your design, including light, dark, and textured backgrounds.
#### 2. Purposeful and Subtle Application
* **Use Shadows to Convey Meaning:** Apply shadows with a clear purpose. They can indicate:
* **Elevation/Depth:** To suggest an element is "lifted" from the page, like a modal or a card.
* **Interactive States:** To provide subtle visual feedback on hover or focus.
* **Grouping/Separation:** To visually group related elements or separate distinct sections.
* **Avoid Overuse:** Be judicious. Not every element needs a shadow. Reserve them for elements where they genuinely add value to the user experience.
* **Control Blur and Spread:**
* **`blur-radius`:** Use a moderate blur radius to create a soft, natural-looking shadow. Excessive blur can make the shadow diffuse and less effective. A `blur-radius` of `0` creates a sharp, hard shadow which can be useful for specific UI elements but can also appear harsh.
* **`spread-radius`:** Use `spread-radius` sparingly. It can be useful for making shadows more pronounced, but overusing it can lead to chunky, unnatural shadows.
#### 3. Robust Focus Indicators
* **Never Rely Solely on `box-shadow` for Focus:** This is a critical accessibility rule. Always combine `box-shadow` with other, more prominent focus styles.
* **Combine with Borders or Outlines:** A common and effective approach is to use a combination of a `border` or `outline` for the primary focus indicator, and a subtle `box-shadow` to add a bit of visual flair or depth.
* **High Contrast Focus Styles:** Ensure the primary focus indicator has a high contrast ratio against the element and its surroundings. The `outline` property is often preferred for focus indicators as it doesn't affect the layout and can be styled independently.
* **`outline` vs. `border` for Focus:**
* `outline`: Renders outside the element's box model, meaning it doesn't affect layout. It's generally recommended for focus indicators.
* `border`: Renders inside the element's box model, which can cause layout shifts when applied or removed.
#### 4. Consider User Preferences and Settings
* **`prefers-reduced-motion`:** For any animations involving `box-shadow`, always respect the user's preference for reduced motion. This can be achieved using the `prefers-reduced-motion` media query. If a user prefers reduced motion, disable or significantly simplify any shadow animations.
#### 5. Semantic HTML and ARIA
* **Shadows are for Presentation, Not Semantics:** Remember that `box-shadow` is purely presentational. If a shadow is used to convey important information about an element's state or purpose (e.g., a "new" notification badge), ensure this information is also conveyed semantically through HTML structure or ARIA attributes for assistive technology users.
### Technical Considerations for Developers
When implementing `box-shadow` for accessibility, consider the following technical aspects:
* **Browser Support:** `box-shadow` has excellent browser support across modern browsers. However, older browsers might have limitations. For critical accessibility features, always check caniuse.com.
* **Performance:** While `box-shadow` is generally performant, overly complex shadows (multiple shadows, large blur/spread radii) on many elements can have a minor impact on rendering performance, especially on lower-powered devices. Profile your application if you suspect performance issues.
* **CSS Variables (Custom Properties):** Utilize CSS variables to manage your shadow definitions. This makes it easier to maintain consistency and adjust values for accessibility across your project.
css
:root {
--shadow-primary: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-focus-ring: 0 0 0 3px rgba(50, 150, 255, 0.5); /* For focus */
}
.card {
box-shadow: var(--shadow-primary);
}
.modal {
box-shadow: var(--shadow-elevated);
}
.button:focus {
outline: none; /* Remove default outline if custom is used */
box-shadow: var(--shadow-focus-ring); /* Use a distinct focus shadow */
border: 1px solid blue; /* And a border for clarity */
}
## 5+ Practical Scenarios for Accessible `box-shadow`
Let's explore concrete examples of using `box-shadow` with accessibility in mind.
### Scenario 1: Card-like Elements (e.g., Product Listings, Articles)
**Goal:** Visually group content and imply a slight elevation, making it easier to distinguish from the background.
**Accessibility Considerations:** Ensure content within cards has good contrast, and the shadow doesn't obscure text. Provide clear focus states for interactive cards.
**Bad Practice:**
css
.card-bad {
background-color: white;
box-shadow: 0 0 20px black; /* Too much blur and spread, potentially low contrast if background is dark */
color: #333; /* Content might be hard to read against a dark background with this shadow */
}
**Good Practice:**
css
.card-good {
background-color: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-good:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slightly more pronounced on hover */
}
.card-good:focus-within { /* For interactive cards */
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.7); /* Clear focus ring */
border: 1px solid rgba(0, 123, 255, 0.7); /* Optional border for focus */
}
/* Ensure content inside card has good contrast */
.card-good h2,
.card-good p {
color: #333; /* Good contrast against white */
}
### Scenario 2: Buttons and Interactive Elements
**Goal:** Provide visual feedback on hover and focus states, clearly indicating interactivity.
**Accessibility Considerations:** Focus states *must* be highly visible and distinct. Shadows alone are insufficient.
**Bad Practice:**
css
.button-bad {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* Shadow is okay, but no clear focus style */
}
.button-bad:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Just a slightly larger shadow, not a distinct focus */
}
**Good Practice:**
css
.button-good {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: 1px solid transparent; /* Base border for consistency */
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for resting state */
transition: all 0.2s ease-in-out;
}
.button-good:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly more pronounced shadow on hover */
}
.button-good:focus {
outline: none; /* Remove default outline */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.1); /* Combined shadow: focus ring + subtle element shadow */
border-color: rgba(0, 123, 255, 0.5); /* A visible border for focus */
}
/* For keyboard users, the focus state is crucial */
.button-good:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.1);
border-color: rgba(0, 123, 255, 0.7);
}
### Scenario 3: Modals and Dialogs
**Goal:** Visually separate a modal from the background content, indicating it requires user attention.
**Accessibility Considerations:** The overlay needs to maintain contrast, and the modal itself must be clearly distinguishable. Focus should be trapped within the modal.
**Bad Practice:**
css
.modal-bad {
background-color: white;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* Too dark, too much spread, can obscure content */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
}
.modal-overlay-bad {
background-color: rgba(0, 0, 0, 0.9); /* Too dark, can be oppressive */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
**Good Practice:**
css
.modal-overlay-good {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-good {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow to show elevation */
max-width: 500px;
width: 90%;
text-align: center;
position: relative; /* For potential inner positioning */
}
.modal-good h3 {
margin-top: 0;
color: #333;
}
.modal-good p {
color: #555;
}
.modal-good:focus-within { /* Ensure focus is visible within the modal */
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.7), 0 8px 16px rgba(0, 0, 0, 0.2);
}
### Scenario 4: Input Fields and Form Elements
**Goal:** Provide clear visual cues for the input area and its states (e.g., focused, error).
**Accessibility Considerations:** Focus indicators for form elements are critical for keyboard users. Error states must be clearly communicated.
**Bad Practice:**
css
.input-bad {
border: 1px solid #ccc;
padding: 8px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inset shadow, but no clear focus */
}
.input-bad:focus {
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2); /* Just a slightly darker inset shadow */
}
**Good Practice:**
css
.divider-good {
height: 1px;
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent); /* Gradient for subtle separation */
margin: 30px 0;
width: 100%;
}
/* Alternative using box-shadow */
.divider-good-shadow {
height: 1px;
margin: 30px 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); /* Subtle shadow to create a line effect */
}
### Scenario 6: Highlighting Elements on Hover (e.g., Navigation Links)
**Goal:** Provide immediate visual feedback when a user's pointer is over an interactive element.
**Accessibility Considerations:** This is purely for mouse users. Keyboard navigation must have its own distinct focus indicator.
**Bad Practice:**
css
.nav-link-bad {
text-decoration: none;
color: #007bff;
padding: 5px 10px;
box-shadow: 0 3px 0 #007bff; /* Underline effect with shadow */
}
.nav-link-bad:hover {
box-shadow: 0 5px 0 #0056b3; /* Just changes shadow, might not be obvious */
}
**Good Practice:**
Home
About
Contact
css
.nav-link-good {
text-decoration: none;
color: #007bff;
padding: 5px 10px;
display: inline-block; /* For padding and margin */
position: relative; /* For pseudo-elements if needed */
transition: color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.nav-link-good::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #007bff; /* Base underline */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.2s ease-in-out;
}
.nav-link-good:hover {
color: #0056b3;
}
.nav-link-good:hover::after {
transform: scaleX(1); /* Show underline on hover */
transform-origin: bottom left;
}
.nav-link-good:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Clear focus ring */
border-radius: 3px; /* Slight rounding for focus ring */
}
## Global Industry Standards and Guidelines
Adherence to established accessibility guidelines is not just good practice; it's often a legal requirement. The `box-shadow` property must be considered within the context of these standards.
### Web Content Accessibility Guidelines (WCAG)
WCAG is the international standard for web accessibility. When using `box-shadow`, the following WCAG principles are most relevant:
* **Perceivable:** Information and user interface components must be presentable to users in ways they can perceive.
* **1.4.3 Contrast (Minimum):** Text and images of text must have a contrast ratio of at least 4.5:1. While `box-shadow` itself isn't text, its presence shouldn't compromise the contrast of actual text content. Ensure shadows don't make text harder to read.
* **1.4.11 Non-text Contrast:** Non-text elements (like graphical objects, user interface components, and graphical text) must have a contrast ratio of at least 3:1 against adjacent colors. If a shadow is used to define a UI component's boundary or state, it must meet this requirement.
* **Operable:** User interface components and navigation must be operable.
* **2.4.7 Focus Visible:** Any user interface component that has keyboard focus must have a mode of operation where the keyboard focus is visible. As repeatedly emphasized, `box-shadow` alone is insufficient for focus indication.
* **Understandable:** Information and the operation of user interface must be understandable.
* **3.3.1 Error Identification:** If an input error is automatically detected, the input is identified, and error messages are provided to the user in text. Shadows can be used to *highlight* errors (e.g., a red-bordered input with a subtle shadow), but the error message itself must be clear and accessible.
### ARIA (Accessible Rich Internet Applications)
ARIA attributes can be used to enhance the accessibility of dynamic content and advanced UI controls. While `box-shadow` is a visual property, its use in dynamic components (like tooltips or custom dropdowns) should be complemented by ARIA. For instance, if a shadow indicates a tooltip is present, ensure the tooltip's content is announced by screen readers using `aria-describedby` or `aria-labelledby`.
### Design System Best Practices
Modern design systems often include guidelines for shadow usage. These guidelines should explicitly address accessibility:
* **Shadow Palettes:** Define a palette of accessible shadows with pre-defined color (with alpha), blur, and spread values.
* **Usage Guidelines:** Specify when and how to use shadows, emphasizing their role in hierarchy, affordance, and states.
* **Focus State Integration:** Mandate that shadows are *never* the sole focus indicator and provide clear examples of how to combine them with `outline` or `border`.
## Multi-language Code Vault: Accessible `box-shadow` Examples
Here's a collection of `box-shadow` examples in different languages, demonstrating accessible practices. This vault aims to provide developers with readily usable snippets.
### English (en)
css
/* Subtle elevation for cards */
.card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Clear focus indicator for interactive elements */
.interactive-element:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* Blue focus ring */
}
/* Inset shadow for depth within an element */
.inset-panel {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
### Español (es)
css
/* Elevación sutil para tarjetas */
.tarjeta {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Indicador de foco claro para elementos interactivos */
.elemento-interactivo:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* Anillo de foco azul */
}
/* Sombra interior para profundidad dentro de un elemento */
.panel-interior {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
### Français (fr)
css
/* Élévation subtile pour les cartes */
.carte {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Indicateur de focus clair pour les éléments interactifs */
.element-interactif:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* Anneau de focus bleu */
}
/* Ombre intérieure pour la profondeur à l'intérieur d'un élément */
.panneau-interieur {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
### Deutsch (de)
css
/* Dezente Erhöhung für Karten */
.karte {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Deutliche Fokus-Anzeige für interaktive Elemente */
.interaktives-element:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* Blauer Fokusring */
}
/* Innenschatten für Tiefe innerhalb eines Elements */
.innen-bereich {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
### Italiano (it)
css
/* Ombra leggera per le schede */
.scheda {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Indicatore di focus chiaro per elementi interattivi */
.elemento-interattivo:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* Anello di focus blu */
}
/* Ombra interna per profondità all'interno di un elemento */
.pannello-interno {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
### Japanese (ja)
css
/* カードのわずかな奥行き */
.card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* インタラクティブな要素の明確なフォーカスインジケーター */
.interactive-element:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(50, 150, 255, 0.6); /* 青いフォーカスリング */
}
/* 要素内の奥行きのためのインセットシャドウ */
.inset-panel {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
## Future Outlook: Evolving Accessibility and Visual Design
The landscape of web design and accessibility is continuously evolving. As designers and developers, we must remain proactive in adapting to new challenges and opportunities.
### AI-Powered Accessibility Auditing
The future will likely see more sophisticated AI tools capable of automatically auditing interfaces for accessibility issues. These tools will be able to analyze `box-shadow` properties in context, flagging potential contrast problems, insufficient focus indicators, or overuse of shadows. This will augment human expertise, enabling faster and more comprehensive accessibility checks.
### Dynamic Color and Theming
As dynamic theming and user-customizable interfaces become more prevalent, the challenge of maintaining accessible `box-shadow` implementations will grow. Design systems will need robust mechanisms to ensure that shadows adapt correctly to user-selected color schemes, always adhering to contrast requirements. Future CSS features might offer more direct control over how shadows interact with surrounding colors.
### Advanced Micro-interactions and Haptic Feedback
The subtle use of `box-shadow` can be further enhanced by integrating with other sensory feedback mechanisms. For users on touch devices, `box-shadow` changes could be paired with haptic feedback to provide a more tangible sense of interaction. However, this must be done thoughtfully to avoid overwhelming users or creating accessibility barriers for those sensitive to such feedback.
### Emphasis on Motion and Animation Accessibility
While this guide focuses on static `box-shadow` properties, the use of animated shadows is a growing area. Future developments will likely include more nuanced ways to control animation timing, easing, and responsiveness to user preferences like `prefers-reduced-motion`, ensuring that dynamic visual effects are inclusive.
### The Role of Design Systems
Design systems will continue to be the cornerstone of accessible design. Expect to see more prescriptive guidance within design systems on shadow usage, including accessible palettes, clear rules for focus states, and perhaps even programmatic checks to enforce accessibility standards directly within the design tooling.
## Conclusion
CSS `box-shadow` is a versatile property that can significantly enhance the visual appeal and usability of a website. However, its power comes with a responsibility to ensure inclusivity. By adhering to the best practices outlined in this guide – prioritizing contrast, using shadows purposefully, ensuring robust focus indicators, and respecting user preferences – we can leverage `box-shadow` to create digital experiences that are not only beautiful but also accessible to everyone. As a Data Science Director, I advocate for a data-driven approach to design, where accessibility is not an afterthought but a core metric guiding our development processes. By meticulously applying these principles, we can build a more inclusive digital future, one shadow at a time.
Accessible Card Title
This card uses a subtle box-shadow to indicate elevation without sacrificing readability. The content maintains high contrast against the white background.
Learn More
Invalid email format
css
.form-group {
margin-bottom: 15px;
}
.input-good {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Very subtle inset shadow */
transition: all 0.2s ease-in-out;
}
.input-good:focus {
outline: none;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(0, 123, 255, 0.5); /* Inset shadow + focus ring */
border-color: rgba(0, 123, 255, 0.5);
}
.input-good.error {
border-color: #dc3545; /* Red border for error */
}
.input-good.error:focus {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(220, 53, 69, 0.5); /* Inset shadow + error focus ring */
border-color: rgba(220, 53, 69, 0.5);
}
.error-message {
color: #dc3545;
font-size: 0.875em;
display: block;
margin-top: 5px;
}
### Scenario 5: Subtle Dividers or Separators
**Goal:** Visually separate sections without using harsh lines.
**Accessibility Considerations:** Ensure the divider doesn't create visual noise or obscure content.
**Bad Practice:**
css
.divider-bad {
height: 2px;
background-color: #eee; /* A faint line, but could be missed */
margin: 20px 0;
}
**Good Practice:**
Section One
Content for section one.
Section Two
Content for section two.