Empathy theme

The colours 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: Francis Snoddy on behalf of ESDC - Portfolio Web

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 standards. Tested by Eric Guitard, eric.guitard@servicecanada.gc.ca. 2024-04-30.

Progressive enhancement note:

• The btn-empathy class must be accompanied 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 colours 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.

.text-empathy

Set a purple colour thematic to text.

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 Form with progress bar

Code

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

Life Journey Home Page Layout

The home page layout for the Life Journey Death project can be found on the following page: Death (Home page layout)

Checklist page for Death project

The checklist page layout for the Life Journey Death project can be found on the following page: Death (Checklist page layout)