/* a11y-fixes.css - written by fixers/30_a11y.py. Do not hand-edit. Linked last in at the point 30_a11y runs; 50_perf appends one more stylesheet (mhw-perf.css, image sizing only, no colour declarations) after it. Every rule here is !important, so source order decides nothing. Contrast ratios below are WCAG 2.x relative-luminance ratios, computed from the colours Chrome actually reported for these elements on the built page (measured, not estimated). AA needs 4.5:1 for normal text and 3:1 for large text (>=24px, or >=18.66px bold). | # | selector | old fg on bg | new fg on bg | before | after | |---|------------------------------------------|-----------------------|-----------------------|--------|-------| | 1 | .a11y-cx-bg-cyan (cyan panels) | #FFFFFF on #44BAD9 | #FFFFFF on #1D778E | 2.27 | 5.15 | | 2 | .a11y-cx-btn-cyan .elementor-button | #FFFFFF on #44BAD9 | #FFFFFF on #1D778E | 2.27 | 5.15 | | 3 | .a11y-cx-bg-orange (orange CTA blocks) | #FFFFFF on #FA4616 | #FFFFFF on #D53005 | 3.53 | 4.94 | | 4 | .a11y-cx-btn-orange .elementor-button | #FFFFFF on #FA4616 | #FFFFFF on #D53005 | 3.53 | 4.94 | | 5 | .elementor-item.elementor-item-active | #44BAD9 on #2078B4 | #FFFFFF on #2078B4 | 2.10 | 4.77 | | 6 | p.a11y-eyebrow-footer | #44BAD9 on #FFFFFF | #1D778E on #FFFFFF | 2.27 | 5.15 | | 7 | .a11y-cx-fgbtn-cyan .elementor-button | #44BAD9 on #FFFFFF | #1D778E on #FFFFFF | 2.27 | 5.15 | | 8 | .elementor-widget-text-editor a | #2FC1FF on #FFFFFF | #0075A6 on #FFFFFF | 2.06 | 5.13 | | 9 | a.skip-link, a.a11y-skip-link | #2FC1FF on #FFFFFF | #FFFFFF on #092436 | 2.06 | 15.94 | |10 | .entry-content .elementor-icon-box-description | #08ACF2 on #FFFFFF | #0075A6 on #FFFFFF | 2.56 | 5.13 | |11 | .ti-with-tooltip (Trustindex widget) | #767676 on #F4F4F4 | #666666 on #F4F4F4 | 4.13 | 5.22 | |12 | .a11y-cx-bg-cyan .mhw-review-* (10_content) | #4C5253 on #1D778E | #FFFFFF on #1D778E | 1.54 | 5.15 | |13 | .a11y-cx-bg-cyan .mhw-gbp-link | #2FC1FF on #1D778E | #FFFFFF on #1D778E | 3.27 | 5.15 | Left alone on purpose: * the hero h1, the hero eyebrow and the outline "(386) 275-6891" hero button. Chrome reports them as white/cyan on #FFFFFF because their section paints a photograph under a linear-gradient overlay (rgba(0,0,0,0.83) at 0.92 opacity) that no static checker can resolve; the text actually sits on near-black and clears 4.5:1 comfortably. Restyling them would break a legible design to satisfy a tool. * the two 22px bold navy headings inside the cyan panels: #092436 on #1D778E = 3.10:1, above the 3:1 large-text threshold. */ /* --- brand cyan used as a background: white text on it was 2.27:1 --------- */ .a11y-cx-bg-cyan { background-color: #1D778E !important; } .a11y-cx-btn-cyan .elementor-button, .a11y-cx-btn-cyan .wpforms-form button[type="submit"] { background-color: #1D778E !important; } /* WPForms fields in the quote form are cyan boxes with white text/placeholder */ .a11y-cx-form-cyan .wpforms-form .wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .a11y-cx-form-cyan .wpforms-form .wpforms-field textarea, .a11y-cx-form-cyan .wpforms-form .wpforms-field select { background-color: #1D778E !important; } /* --- brand orange used as a background: white text on it was 3.53:1 ------- */ .a11y-cx-bg-orange { background-color: #D53005 !important; } .a11y-cx-btn-orange .elementor-button, .a11y-cx-btn-orange .wpforms-form button[type="submit"] { background-color: #D53005 !important; } /* --- active nav item: #44BAD9 on the #2078B4 header bar was 2.10:1 -------- */ .elementor-nav-menu .elementor-item.elementor-item-active, .elementor-nav-menu .elementor-item.elementor-item-active:focus { color: #FFFFFF !important; } /* --- footer eyebrow label: #44BAD9 on white was 2.27:1 ------------------- */ p.a11y-eyebrow-footer { color: #1D778E !important; } /* --- outline phone buttons: #44BAD9 label on a white section was 2.27:1 -- */ .a11y-cx-fgbtn-cyan .elementor-button { color: #1D778E !important; } /* --- Astra palette text on light sections --------------------------------- Astra's two light-blue palette colours are used for body links (#2FC1FF, 2.06:1 on white), for heading links such as the /contact/ phone number, and for icon-box copy (#08ACF2, 2.56:1 on white). All three become #0075A6 = 5.13:1 on white. Scoped to .entry-content on purpose: the header bar and the footer run the same widgets on dark blue/navy, where the light blue already passes and darkening it would break it. The second rule covers the panels inside .entry-content that are themselves dark: #FFFFFF on #1D778E = 5.15:1, on #2078B4 = 4.77:1, on #092436 = 15.94:1. */ .entry-content .elementor-widget-text-editor a:not(.elementor-button), .entry-content .elementor-widget-theme-post-content a:not(.elementor-button), .entry-content .elementor-heading-title a, .entry-content .elementor-icon-box-description, .entry-content .elementor-icon-box-description a { color: #0075A6 !important; } /* A darker link is only 1.55:1 against the #4C5253 body copy around it, so inline links in body copy also get a non-colour cue (WCAG 1.4.1 / axe link-in-text-block). Buttons and menu items keep their own styling. */ .entry-content .elementor-widget-text-editor a:not(.elementor-button), .entry-content .elementor-widget-theme-post-content a:not(.elementor-button) { text-decoration: underline !important; } .entry-content .a11y-cx-bg-cyan .elementor-widget-text-editor a:not(.elementor-button), .entry-content .a11y-cx-bg-cyan .elementor-heading-title a, .entry-content .a11y-cx-bg-cyan .elementor-icon-box-description, .entry-content .a11y-cx-bg-cyan .elementor-icon-box-description a, .entry-content .a11y-cx-bg-dark .elementor-widget-text-editor a:not(.elementor-button), .entry-content .a11y-cx-bg-dark .elementor-heading-title a, .entry-content .a11y-cx-bg-dark .elementor-icon-box-description, .entry-content .a11y-cx-bg-dark .elementor-icon-box-description a { color: #FFFFFF !important; } /* --- crawlable review block on a recoloured panel ------------------------- 10_content renders .mhw-review-* in the site body colour #4C5253. On white that is 7.66:1 and is left alone; inside a panel this file darkens it would be 1.54:1, so there it becomes white: 5.15:1 on #1D778E, 4.77:1 on #2078B4, 15.94:1 on #092436, 4.94:1 on #D53005. */ .a11y-cx-bg-cyan .mhw-review-list, .a11y-cx-bg-cyan .mhw-review, .a11y-cx-bg-cyan .mhw-review-text, .a11y-cx-bg-cyan .mhw-review-text p, .a11y-cx-bg-cyan .mhw-review-meta, .a11y-cx-bg-cyan .mhw-review-author, .a11y-cx-bg-cyan .mhw-review-date, .a11y-cx-bg-cyan .mhw-review-rating, .a11y-cx-bg-cyan .mhw-review-aggregate, .a11y-cx-bg-cyan .mhw-review-more, .a11y-cx-bg-dark .mhw-review-list, .a11y-cx-bg-dark .mhw-review, .a11y-cx-bg-dark .mhw-review-text, .a11y-cx-bg-dark .mhw-review-text p, .a11y-cx-bg-dark .mhw-review-meta, .a11y-cx-bg-dark .mhw-review-author, .a11y-cx-bg-dark .mhw-review-date, .a11y-cx-bg-dark .mhw-review-rating, .a11y-cx-bg-dark .mhw-review-aggregate, .a11y-cx-bg-dark .mhw-review-more, .a11y-cx-bg-orange .mhw-review-list, .a11y-cx-bg-orange .mhw-review, .a11y-cx-bg-orange .mhw-review-text, .a11y-cx-bg-orange .mhw-review-text p, .a11y-cx-bg-orange .mhw-review-meta, .a11y-cx-bg-orange .mhw-review-author, .a11y-cx-bg-orange .mhw-review-date, .a11y-cx-bg-orange .mhw-review-rating, .a11y-cx-bg-orange .mhw-review-aggregate, .a11y-cx-bg-orange .mhw-review-more { color: #FFFFFF !important; } /* the Google link in that block was #2FC1FF on #1D778E (3.27:1); white plus an underline so it is still distinguishable from the white copy around it */ .a11y-cx-bg-cyan .mhw-gbp-link, .a11y-cx-bg-dark .mhw-gbp-link, .a11y-cx-bg-orange .mhw-gbp-link { color: #FFFFFF !important; text-decoration: underline !important; } /* --- Trustindex review dates: #767676 on its own #F4F4F4 card was 4.13:1 --- */ .ti-with-tooltip, .ti-review-item .ti-date { color: #666666 !important; } /* --- skip link: #2FC1FF on white was 2.06:1; hidden until focused --------- */ a.skip-link, a.a11y-skip-link { color: #092436 !important; } a.skip-link:focus, a.a11y-skip-link:focus { position: absolute !important; left: 8px !important; top: 8px !important; z-index: 100000 !important; width: auto !important; height: auto !important; padding: 12px 20px !important; clip: auto !important; clip-path: none !important; overflow: visible !important; background: #092436 !important; color: #FFFFFF !important; font-weight: 700 !important; text-decoration: underline !important; outline: 3px solid #FFFFFF !important; outline-offset: 2px !important; } a.a11y-skip-link { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* --- visually hidden text used to name "Learn More" links ----------------- */ .a11y-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* --- eyebrow labels demoted from headings keep their Elementor styling ---- */ p.eyebrow { margin: 0 !important; }