/* Larson Family Orthodontics: contrast fixes, 2026-08-27. Client-approved. * * WHY THIS FILE EXISTS * The brand accent mint #AED6C1 measures 1.59:1 against white text, and 1.59:1 as text on * white. Both fail WCAG AA, which needs 4.5:1. The brand kit itself says mint is "a fill * and highlight only, never caption type", so the site was breaking its own brand rule as * well as the accessibility standard. * * APPROACH * Mint is never removed. Every mint fill on the site stays mint, including all 83 * mint-as-background rules in the generated Elementor CSS, because mint-as-fill IS the * brand. What changes is the TEXT sitting on or beside it. That choice keeps the site * looking like itself: a visitor sees the same mint buttons and mint panels, with legible * type on them. * * HOW THE FAILURES WERE FOUND * Measured in a real browser, reading each element's computed colour and walking the * ancestor chain for the first opaque background. Only elements that render their own text * node (or are an icon) were counted; a container whose textContent merely includes a * descendant's text is a false positive and was excluded. That distinction matters: the * naive scan reported 44 failures, of which only 6 were real. * * Four of the real ones were NOT in the original audit: * - the mobile CTA buttons (white on mint, 1.59:1) * - the nav active item (mint on white, 1.59:1) * - the icon-box icons, rendering mint on mint at 1.00:1, i.e. literally invisible * - the header utility bar's address and phone, brand blue on near-black at 1.88:1 * * COLOURS * Exactly ONE new value is introduced: * #AB620C the accent orange #EF9020 darkened to the lightest point that clears 4.5:1 * against white text (4.68:1), at the same hue and saturation. * Everything else is a colour already documented for this brand: * #2F5E4B the mint-ink from the client's video ad kit. 7.44:1 on white and 4.67:1 on * mint, so one value serves both grounds and every button reads consistently. * #AED6C1 brand mint itself, which is 10.26:1 on the ink ground. Mint fails on white but * excels on dark, which is exactly the "highlight" role the brand kit describes. * * WHY !important * Elementor emits per-page selectors of the form * .elementor-19 .elementor-element.elementor-element-XXXX .elementor-button * carrying four classes of specificity (0,4,0), with element IDs that differ per page and * per widget. Matching that from one stylesheet would mean enumerating every generated ID * or stacking meaningless duplicate classes. Plain specificity was tried first and measured * as losing. This file is a small, single-purpose accessibility layer loaded last on every * page, so !important is the honest tool here rather than a workaround. * * DO NOT edit the generated files under wp-content/uploads/elementor/css/. A future * Elementor build regenerates them and would silently drop the fix. */ /* ---- 1. Anything mint, whether mint is the fill behind the text or the text itself. #2F5E4B is 4.67:1 on a mint fill and 7.44:1 on white, so one declaration covers the primary CTA, its mobile twins, the ghost buttons, the nav active item, and the icon-box icons, titles and descriptions on mint panels. Mint fills are untouched; mint is also kept as the hover state, which is its brand role. ---- */ .elementor-element.elementor-global-2067 .elementor-button, .elementor-widget-mobile .elementor-button, .elementor-widget-button .elementor-button, .elementor-widget-nav-menu .elementor-item.elementor-item-active, .elementor-widget-icon-box .elementor-icon, .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a, .elementor-widget-icon-box .elementor-icon-box-description { color: #2F5E4B !important; } .elementor-widget-icon-box .elementor-icon, .elementor-widget-icon-box .elementor-icon svg, .elementor-widget-icon-box .elementor-icon svg path, .elementor-widget-nav-menu .elementor-item.elementor-item-active svg { fill: #2F5E4B !important; } /* ---- 2. White text on the accent orange #EF9020 (2.42:1). Pricing table CTAs, form submit buttons, post and archive buttons. Darkened ground, white text kept, so these stay visually distinct from the mint CTAs. Now 4.68:1. ---- */ .elementor-price-table__button.elementor-button, .elementor-widget-form .elementor-button[type="submit"], .elementor-widget-archive-posts .elementor-button, .elementor-widget-posts .elementor-button { background-color: #AB620C !important; color: #FFFFFF !important; } /* ---- 3. Price-table tier headings. "Minor" sat white-on-mint (1.59:1) and "Full Care" white-on-orange (2.42:1). Brand ink clears BOTH grounds, 10.26:1 on mint and 6.76:1 on orange, so the three tiers keep their distinct colours instead of being flattened to one. ---- */ .elementor-price-table__heading, .elementor-price-table__subheading { color: #221F20 !important; } /* The third tier ("Complete") uses brand BLUE #254796 as its header ground, not mint, so ink would take it to 1.88:1. White on that blue is already 8.68:1, so restore it. Three tiers, three grounds: no single text colour serves all of them. */ .elementor-element-3a86db9 .elementor-price-table__heading, .elementor-element-3a86db9 .elementor-price-table__subheading { color: #FFFFFF !important; } /* The featured-tier ribbon ("Full Care") is white on the accent orange at 2.42:1. Same darkening as the buttons, so white text is retained. Now 4.68:1. */ .elementor-ribbon-inner { background-color: #AB620C !important; } /* ---- Heading widgets. Elementor's DEFAULT heading colour is the mint global (--e-global-color-primary), so any heading whose designer did not set an explicit colour renders mint on white at 1.59:1. Most headings do have an explicit colour (black body headings, white hero H1) and those must be left alone. This rule therefore deliberately carries NO !important and matches the default rule's specificity exactly (0,2,0). Loaded later, it beats the default on source order, while every per-element rule (0,3,0 or higher) still wins over it. That is what confines the change to the headings that were actually failing. ---- */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-theme-post-title .elementor-heading-title { color: #2F5E4B; } /* Four headings sitewide carry an EXPLICIT per-element mint colour, not the inherited default, so the rule above (deliberately specificity-limited) correctly loses to them. They were enumerated by grepping the generated Elementor CSS for per-element rules that set a heading colour to the mint global, which found exactly these four. Listed individually so the fix stays surgical rather than recolouring every heading. */ .elementor-element.elementor-element-029b6d9 .elementor-heading-title, .elementor-element.elementor-element-7b8a477 .elementor-heading-title, .elementor-element.elementor-element-8f23b7b .elementor-heading-title, .elementor-element.elementor-element-b2c79bf .elementor-heading-title { color: #2F5E4B !important; } /* ---- 4. The dark utility bar at the top of the header (#221F20) carried the practice address and phone in brand blue #254796 at 1.88:1, effectively unreadable. Brand mint on that ground measures 10.26:1. ---- */ .elementor-element-339a1ec .elementor-icon-list-item a, .elementor-element-339a1ec .elementor-icon-list-text, .elementor-element-339a1ec .elementor-icon-list-icon, .elementor-element-339a1ec .elementor-icon-list-icon i { color: #AED6C1 !important; } .elementor-element-339a1ec .elementor-icon-list-icon svg { fill: #AED6C1 !important; } /* ---- Layout, from the dead-links lane. The three /pricing CTAs were pinned to a fixed 215px, which measures 57% of viewport at 375px and 52% at 414px, under the house 60% minimum for a primary CTA. ---- */ @media (max-width: 480px) { .elementor-price-table__button.elementor-size-md { width: 100%; max-width: 100%; min-height: 48px; } }