/** * Nebraska Secretary of State - Non-Profit Filings * Accessibility CSS Overrides * * WCAG 2.2 Level A/AA compliance fixes * Applied after platform CSS (bootstrap, sos.css) to override failing values * * WCAG criteria addressed: * - 1.1.1 Non-text Content - Level A * - 1.4.1 Use of Color - Level A * - 1.4.3 Contrast (Minimum) - Level AA * - 2.4.7 Focus Visible - Level AA */ /* ============================================================================= WCAG 1.4.1 - Use of Color (Links distinguishable without color alone) Bootstrap 3 removes text-decoration from links by default. Inline body-text links must have a non-color visual differentiator (underline). Excludes .btn, nav links, and other intentional non-underlined link styles. ============================================================================= */ .content a:not(.btn) { text-decoration: underline; } /* ============================================================================= WCAG 1.4.3 - Button Contrast Nebraska platform .btn-primary uses #00a6d2 (fails 4.5:1 with white) Replacement #046b99 achieves 5.71:1 with white ============================================================================= */ .btn-primary { background-color: #046b99 !important; border-color: #035881 !important; color: #ffffff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: #035881 !important; border-color: #024a6e !important; color: #ffffff !important; } /* ============================================================================= WCAG 2.4.7 - Focus Visible Nebraska platform suppresses focus outlines in some shared CSS files ============================================================================= */ a:focus, .btn:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 2px solid #046b99 !important; outline-offset: 2px !important; } /* ============================================================================= WCAG 1.4.3 - Header / Branding Text Contrast Background is a photographic capitol building image (dark/grey stone tones) applied to ; all header containers are fully transparent. Both .translate-adj links and .agency-name sit over the stone photo — white text with dark text-shadow ensures legibility across variable background tones. ============================================================================= */ .iblock { display: inline-block; } .translate-adj { line-height: 25px; vertical-align: baseline; } .translate-adj a { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.9); } .translate-adj a:hover, .translate-adj a:focus { color: #cce5ff !important; } .agency-name { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.9); } /* ============================================================================= WCAG 1.4.3 - Navigation Contrast Nav background: rgb(248, 248, 248) = #F8F8F8 Text #333333 achieves 12.6:1; links #003d7a achieves 9.7:1 on #F8F8F8 ============================================================================= */ .navbar-default .navbar-nav > li > a { color: #333333 !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #003d7a !important; } .navbar-brand, .navbar-brand:hover, .navbar-brand:focus { color: #1a1a1a !important; } .app-name { color: #1a1a1a !important; } /* ============================================================================= WCAG 1.4.3 - Footer Text / Link Contrast .footer div has a black (#000000) background set by platform CSS. Dark text (#333333) only achieves 3.1:1 on black — fails 4.5:1 minimum. White text achieves 21:1; light blue links achieve 11:1. ============================================================================= */ .footer, .left-footer, .right-footer { color: #ffffff !important; } .left-footer .bold { color: #ffffff !important; } .left-footer a, .right-footer a, .footer a { color: #80c8ff !important; } .left-footer a:hover, .left-footer a:focus, .right-footer a:hover, .right-footer a:focus, .footer a:hover, .footer a:focus { color: #cce5ff !important; }