MAD9013

# Week 10: Colour Schemes & Accessibility

Agenda

# Accessible Colour Schemes

Creating a colour scheme can be a challenging and daunting task.

The process can vary from designer to designer. People have a lot of different ways of creating them. There is really no alternative to experience doing it.

However, we have a repeatable process that you can follow to get started with yours. The basic steps are:

  1. Find the image that represents the feel of your website.
  2. Extract a couple colours from that image which represent the image.
  3. Create a few variations on the two colours by changing the lightness values.
  4. Grab a series of grey values from light to dark.
  5. Start applying the colours on your web page by doing the backgrounds first. Work from the big areas to the small areas.
  6. Make sure you have good contrast between all your foregrounds and backgrounds.
  7. Make sure your text is legible when on top of a background image.

When you create a colour scheme there are two things that you need to constantly be thinking about:

  1. Is this colour combination accessible?
  2. Do the colours I am using send an appropriate message for the content of the website?

# Colour Tools

# ARIA

What the hell is ARIA? (opens new window)

ARIA

ARIA is shorthand for Accessible Rich Internet Applications. ARIA is a set of attributes you can add to HTML elements that define ways to make web content and applications accessible to users with disabilities who use assistive technologies (AT). When accessibility issues cannot be managed with native HTML, ARIA can help bridge those gaps.

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
></div>
1
2
3
4
5
6
7

# Blockquotes, Quotes, and Hyphens

When you want to display a large quote, the <blockquote> element can be used. By default, it will indent the text on the left and right.

<blockquote>
  This is a big quote<br />
  of many lines of text.
</blockquote>
1
2
3
4

If you want to display a quote as an inline bit of text then we use a <q> element.

<q>This is a smaller quote.</q>
1

There are three types of dashes that you can put in text: hyphen, en-dash, and em-dash. Grammatically, each has a different purpose.

  • Hyphens are the shortest dash. They are used to connect words. Represented with a &hyphen;
  • en-dash are used for a range of values. Like 12 - 17. Represented with a &ndash;
  • em-dash are used to indicate a pause in thought and indicate that a sentence is not finished. Represented with a &mdash;

The character entity for a shy-hyphen is &shy; which is used to indicate to the browser where a hyphen could be added, if required.

Here are a couple articles to explain further: HTML character entities for punctuation (opens new window) and Em vs En Dash (opens new window).

# Intermediate CSS Topics

# nth-child Selectors

We can use the nth-child selector to target specific element by their index number.

  • We can target odd or even numbered elements
  • We can target patterns of elements, like every 3rd paragraph.
main p:nth-child(2) {
  /*targets a paragraph inside each <main> element. 
    if the 2nd child is a paragraph  */
}
p:nth-child(odd) {
  /* targets all the odd numbered paragraphs */
}
p:nth-child(3n) {
  /* targets every 3rd paragraph */
}
p:first-child {
  /* targets the first paragraph on the page */
}
p:last-child {
  /* targets the last paragraph on the page */
}
p:nth-of-type(3) {
  /* targets the third paragraph, regardless of
    whether or not there are other siblings of the
    paragraph which are not paragraphs */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CSS Tricks has a great page that explains how to create nth-child patterns. CSS-Tricks tutorial on nth-child selectors (opens new window)

# Attribute Selectors

You can target elements by whether or not they have specific attributes or whether those attributes have certain values.

  • We can also do some pattern matching on the attribute values.
  • We use square brackets to contain the attribute names and/or values
p[title]{
    /* target paragraphs that has a title attribute */
}
a[href="#"]{
    /* targets anchors that have an href whose value is "#" exactly */
}
img[src^="https://"]{
    /* targets images whose src attribute starts with "https://"
}
1
2
3
4
5
6
7
8
9

CSS Tricks has a great article on the different types of attribute selectors. CSS-Tricks tutorial on attribute selectors (opens new window)

# Border-Radius

This property lets us round the corners of the background-color, background-image, and the border.

p {
  border: 1px solid #333;
  border-radius: 12px; /* every corner uses a circle of 12px radius to create the corners */
  border-radius: 12px 64px; /* horizontal radius is 12px, vertical radius is 64px */
}
1
2
3
4
5

# Viewport Units

An alternative unit to use for font-size, padding, margin, etc.

  • The four types are vw, vh, vmin, and vmax
  • vw is viewport width
  • vh is the viewport height
  • vmin is the smaller of the two viewport dimensions
  • vmax is the larger of the two viewport dimensions
p {
  font-size: 3vw; /* 3% of the viewport width */
}
1
2
3

# CSS Browser Prefixes

When browser companies want to add a trial version of a CSS property they add support for a prefixed version. Each browser engine has it's own prefix. If you want to support older browsers then you add the prefixed version of the property first and then the non-prefixed version last. Not all properties have a prefixed version for each browser, or at all.

/* demo version of the prefixes */
-moz-border-radius: 12px; /* for firefox */
-webkit-border-radius: 12px; /* webkit for safari, chrome, and new opera */
-o-border-radius: 12px; /* old opera prior to v15 */
-ms-border-radius: 12px; /* Microsoft IE and Edge */
1
2
3
4
5

# CSS Variables

CSS3 introduced the idea of including variables in your CSS to make it easier to change the values of repeated properties.

  • The concept of style variables was actually something that came from CSS Preprocessors like SASS, Stylus, and LESS. We will cover SASS later this semester.
  • The basic syntax
/* create the variables within a specific scope
:root is used as it includes the whole page */

:root {
  --myvar1: 1rem;
  --myvar2: pink;
}

/* the method var( ) is used to inject the value into a style declaration */
p {
  font-size: var(--myvar1);
  color: var(--myvar2);
  border: 1px solid hsl(var(--myvar2), 50%, 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

TIP

CSS variables are a great way to avoid errors when using the same value for a colour or a font-size.

# CSS calc() Function

The CSS calc() function lets you pass in a basic mathematical expression using any combination of CSS units.

p {
  width: calc(80vw - 3% + 1rem);
  font-size: calc(1vh + 1vw + 0.25rem);
}
1
2
3
4

The result of the function can be used for any CSS property that uses a single numeric value.

# Object-Fit

CSS backgrounds can use the background-size property to alter the size of the image to fill spaces while still maintaining the proper aspect ratio.

If you have an <img> element and want to do the same thing - altering the size of an image while maintaining the proper aspect ratio - then we can use the CSS object-fit property.

# Scroll-snap

There is a CSS property scroll-snap that will control how webpages move when the user clicks a link to move to a different part of the same page. gomakethings.com tutorial (opens new window)

# Clip-Path

The CSS clip-path property lets use create shapes by defining the points around the edges. The path that we define will crop the content that is outside the shape we defined.

# @supports

When you want to change your CSS properties depending on whether or not a browser supports something

@supports (display: flex) {
  /* CSS here if the browser supports flexbox */
}
@supports not (display: flex) {
  /* CSS here if the browser does NOT support flexbox */
}
1
2
3
4
5
6

# To Do Before Week 11

Self-Directed To Do

Watch the following videos before week 10:

Last Updated: 8/26/2021, 10:59:08 PM

← Week 11: Animations, Transitions & Transforms →