Empathy theme

The colors offered by this theme aim to evoke a sense of empathy for the user during certain life events, such as grieving the loss of a loved one.

Sponsor: ESDC - Principal Publisher

Accessibility statement: These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using webaim online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standrds. Tested by Eric Guitard, eric.guitard@servicecanada.gc.ca. 2024-04-30.

Progressive enhancement note:

• The btn-empathy class must be accompagnied with a fall back button class such as btn-default or btn-primary.

CSS classes

.empathy

When applied to the <h1> element it set a purple underline to the title element of the page.

When applied to the Steps Quiz along with the wb-steps and quiz it set the thematic colors to the navigation buttons, the progress bar and to the <legend> text.

.btn-empathy

Along with .btn-primary or .btn-default, set a purple colour thematic to buttons.

Examples

Purple Underline to the <h1>

The example has been applied to the <h1> element of this page.

Code

<h1 property="name" id="wb-cont" class="empathy"><-- Page title --></h1>

Purple Button

Code

<button class="btn btn-primary btn-empathy" type="button">Button</button>

Light Purple Button

Code

<button class="btn btn-default btn-empathy" type="button">Button</button>

Steps Progress

Code

<div class="wb-frmvld provisional wb-steps quiz empathy panel-body">
    <!-- Steps Quiz Form -->
</div>