/*! * IPV Accessibility - SC 1.4.3 Contrast (Minimum), Level AA * * ============================================================================ * THIS FILE IS THE ONLY PART OF THE PLUGIN THAT CHANGES BRAND COLOURS. * * To switch it off without losing any other accessibility fix, add this to * wp-config.php: * * define( 'IPV_A11Y_DISABLE_CONTRAST', true ); * * ...or from a theme/plugin: add_filter( 'ipv_a11y_enable_contrast', '__return_false' ); * ============================================================================ * * Every replacement below is the SAME HUE, minimally darkened - the smallest * shift that reaches the 4.5:1 ratio WCAG requires for normal-size text. * * #fd6001 -> #cc4e01 3.07:1 -> 4.51:1 (white text on it) * #ff8c00 -> #b36200 2.33:1 -> 4.50:1 (white text on it / as text) * #25b15f -> #1c8749 2.79:1 -> 4.55:1 (nav link text, button fills) * #838383 -> #717171 3.79:1 -> 4.88:1 on #fff, 4.56:1 on #f7f7f7 * * Note on the grey: #757575 is the value usually quoted for white * backgrounds, but it only reaches 4.30:1 against this theme's #f7f7f7 panel, * so it FAILS there. #717171 is used instead because it passes on both. * * Hover states are given a further-darkened value rather than the same colour, * so buttons keep visible hover feedback instead of going flat. * * DELIBERATELY NOT CHANGED * .kd_number_string - the large green statistics (800 / 293 / 28,900 / 160) * sit on a DARK background image. They already pass as large text, and * darkening the green would REDUCE their contrast. Scoping matters here. */ /* ------------------------------------------------------------------------- * 1. Body copy grey - the single largest win. * #838383 is set on and inherits site-wide, so one declaration * fixes the bulk of the failures. Descendants that set their own colour * are unaffected, because an explicit value beats an inherited one. * --------------------------------------------------------------------- */ body { color: #717171 !important; } /* * Elements that declare #838383 themselves rather than inheriting it, so the * body rule above cannot reach them. Found by measurement, not guesswork: * form field labels and the contact modal copy. */ .kd-panel-subtitle, .kd-panel-header .kd-panel-subtitle, .wpcf7-form label, .wpcf7-form p, .content-column label, .content-column > div > p, .modal-content p, .modal-content-contact p, .modal-content-contact a { color: #717171 !important; } /* ------------------------------------------------------------------------- * 2. Primary buttons - white text on #ff8c00 (was 2.33:1, the worst offender) * "I'm a Startup", "View our complete portfolio", "VIEW MORE", * "VIEW ALL BLOGS" * --------------------------------------------------------------------- */ .tt_button.tt_primary_button.btn_primary_color, .vc_btn3-container.cta-button-2 > a.vc_general.vc_btn3 { background-color: #b36200 !important; border-color: #b36200 !important; } .tt_button.tt_primary_button.btn_primary_color:hover, .tt_button.tt_primary_button.btn_primary_color:focus, .vc_btn3-container.cta-button-2 > a.vc_general.vc_btn3:hover, .vc_btn3-container.cta-button-2 > a.vc_general.vc_btn3:focus { background-color: #8f4e00 !important; border-color: #8f4e00 !important; } /* ------------------------------------------------------------------------- * 3. Secondary / outline buttons - #ff8c00 used as TEXT on white * "I'm an Investor" * --------------------------------------------------------------------- */ .tt_button.tt_secondary_button.btn_primary_color, .tt_button.tt_secondary_button.btn_primary_color .prim_text { color: #b36200 !important; border-color: #b36200 !important; } .tt_button.tt_secondary_button.btn_primary_color:hover, .tt_button.tt_secondary_button.btn_primary_color:focus, .tt_button.tt_secondary_button.btn_primary_color:hover .prim_text, .tt_button.tt_secondary_button.btn_primary_color:focus .prim_text { color: #8f4e00 !important; border-color: #8f4e00 !important; } /* ------------------------------------------------------------------------- * 4. Top-bar CTA - white text on #fd6001 ("Get Started") * --------------------------------------------------------------------- */ .navbar-topbar > li.menu-item-type-custom, #menu-topbar-menu > li.menu-item-type-custom { background-color: #cc4e01 !important; } .navbar-topbar > li.menu-item-type-custom:hover, #menu-topbar-menu > li.menu-item-type-custom:hover, .navbar-topbar > li.menu-item-type-custom:focus-within, #menu-topbar-menu > li.menu-item-type-custom:focus-within { background-color: #a33e01 !important; } /* ------------------------------------------------------------------------- * 5. Brand green as small text - WPBakery active tab titles * e.g. "As Investor" / "As Startup" tabs, 22px weight 600. * * Note 22px at weight 600 is NOT "large text" under WCAG (that needs 24px, * or 18.66px at weight 700+), so the full 4.5:1 applies. * --------------------------------------------------------------------- */ .vc_tta-tab.vc_active > a > .vc_tta-title-text, .vc_tta-tab.vc_active > a, .vc_tta-tabs-list > li.vc_active > a > span { color: #1c8749 !important; } /* * The current MAIN MENU item is deliberately NOT handled here. * * The navbar is transparent on inner pages, so that link sits on white on the * home page but on the blue hero band (#0074b9) on pages like /contact/. * No single colour reaches 4.5:1 against both, so a static rule cannot be * correct - an early version of this file set it to #1c8749 and made the * /contact/ case WORSE (1.09:1 on blue). * * It is handled in ipv-a11y.js instead, which measures the actual background * behind the link and picks white or dark green accordingly. See * fixNavCurrentContrast(). */ /* ------------------------------------------------------------------------- * 6. Brand green used as a button fill with white text * Contact Form 7 submit buttons, video play button * --------------------------------------------------------------------- */ .wpcf7-form input.wpcf7-submit, .wpcf7-form button.wpcf7-submit, a.play-btn-primary-color { background-color: #1c8749 !important; border-color: #1c8749 !important; } .wpcf7-form input.wpcf7-submit:hover, .wpcf7-form input.wpcf7-submit:focus, .wpcf7-form button.wpcf7-submit:hover, .wpcf7-form button.wpcf7-submit:focus, a.play-btn-primary-color:hover, a.play-btn-primary-color:focus { background-color: #166b3a !important; border-color: #166b3a !important; }