Skip to content

Commit

Permalink
Merge pull request #43 from TRENDS-Rachel-Avbulimen/updating_dftcolours
Browse files Browse the repository at this point in the history
Updating accessible colours into package
  • Loading branch information
DIPAD-Fran-Bryden authored Apr 2, 2024
2 parents 24de817 + 2e4258a commit ab8ae31
Show file tree
Hide file tree
Showing 15 changed files with 74 additions and 27 deletions.
7 changes: 4 additions & 3 deletions DESCRIPTION
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
Package: dftplotr
Type: Package
Title: Functions to Produce Charts in the DfT Style
Version: 0.2.1
Version: 0.3.0
Authors@R:
c(
person("Linda", "Bennett", , "[email protected]", role = c("aut")),
person("Francesca", "Bryden", , "[email protected]", role = c("aut", "cre")))
person("Francesca", "Bryden", , "[email protected]", role = c("aut", "cre")),
person("Rachel", "Avbulimen", , "[email protected]", role = c("aut")))
Description: Functions to produce accessible charts with DfT style and palettes.
Imports: ggplot2,
scales,
directlabels
License: MIT + file LICENSE
Encoding: UTF-8
LazyData: true
RoxygenNote: 7.2.3
RoxygenNote: 7.3.1
Suggests:
testthat (>= 3.0.0)
Config/testthat/edition: 3
26 changes: 26 additions & 0 deletions R/palettes.R
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ dft.colours <- c(
"CorporateGreen60" = "#66A498",
"CorporateGreen40" = "#99C3BA",
"CorporateGreenShade" = "#004D3B",
"CountryGreen" = "#969810",
"TransitGreen" = "#3C9F8B",
"Green" = "#15B542",
"Green80" = "#44C468",
"Green60" = "#72D38E",
Expand Down Expand Up @@ -40,11 +42,17 @@ dft.colours <- c(
"SkyBlue60" = "#66B4DF",
"SkyBlue40" = "#99CDEA",
"SkyBlueShade" = "#006AB0",
"VelocityViolet" = "#4C2C92",
"LilacLane" = "#D65AFC",
"CherryChariot" = "#8A003E",
"PinkCorvette" = "#FF479A",
"Red" = "#FF0000",
"Red80" = "#FF3333",
"Red60" = "#FF6666",
"Red40" = "#FF9999",
"RedShade" = "#D10000",
"CoastalLine" = "#D5811A",
"TrafficTango" = "#FE5500",
"Orange" = "#FF5500",
"Orange80" = "#FF7733",
"Orange60" = "#FF9966",
Expand Down Expand Up @@ -82,6 +90,24 @@ dft.palettes <- list(

clear.skies = extract_colours(
"NavyBlue", "Mint60", "NavyBlue60", "YellowShade", "SkyBlueShade", "Lime60"
),

travel.direction = extract_colours(
"CorporateGreenShade", "TransitGreen", "NavyBlue", "SkyBlue80", "VelocityViolet",

"LilacLane", "CherryChariot", "PinkCorvette"
),

country.lane = extract_colours(
"CorporateGreenShade", "CountryGreen", "SkyBlue80", "CoastalLine", "CherryChariot",

"TrafficTango", "VelocityViolet", "LilacLane"
),

joyful.journey = extract_colours(
"TrafficTango", "CherryChariot", "PinkCorvette", "VelocityViolet", "LilacLane",

"SkyBlue80"
)
)

Expand Down
16 changes: 11 additions & 5 deletions README.Rmd
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,17 @@ The package contains the following functions:

## Colour palettes

The dftplotR package comes with 6 pre-loaded palettes. These contain colours taken from the DfT corporate colour scheme, and have also been selected to meet accessibility guidance. The two primary palettes are `main.palette`; a desaturated palette ideal for use in bar charts or other area fill charts, and `electric.brights`, a saturated palette which improves visibility in line-charts or other point colour charts. The other palettes are ideal where these palettes are not appropriate, or where variation is needed.
The dftplotR package comes with 9 pre-loaded palettes. These contain colours taken from the DfT corporate colour scheme, and have also been selected to meet accessibility guidance. The three primary accessible palettes are `travel.direction`, `country.lane` and `joyful.journey`.

The two main legacy palettes are `main.palette`; a desaturated palette ideal for use in bar charts or other area fill charts, and `electric.brights`, a saturated palette which improves visibility in line-charts or other point colour charts. The other palettes are ideal where these palettes are not appropriate, or where variation is needed.

The palettes and the colours in them can be seen here, or visualised within the package by calling `display.palette()` and the palette name.

```{r, out.width = "80%", fig.align = 'center'}
egg::ggarrange(dftplotr::display_palette("main.palette"),
egg::ggarrange(dftplotr::display_palette("travel.direction"),
dftplotr::display_palette("country.lane"),
dftplotr::display_palette("joyful.journey"),
dftplotr::display_palette("main.palette"),
dftplotr::display_palette("electric.brights"),
dftplotr::display_palette("just.beachy"),
dftplotr::display_palette("cycling.hills"),
Expand Down Expand Up @@ -120,11 +125,12 @@ This tool is ideal to facilitate building your own palettes for use in applicati

The dftplotr colour palettes aim to be accessible to those with the most common forms of colour blindness, and should also be discernable in greyscale. The standard palettes in this package have been designed to meet WCAG 2.0 accessibility guidance.

Four of the created palettes (`main.palette`, `electric.brights`, `just.beachy` and `cycling.hills`) contain four colours each, and meet WCAG 2.0 AAA guidance. All colours have a contrast ratio of at least 4.5:1 to the bars adjacent to them, and alternate light and dark shades to further increase contrast. This is the highest standard of accessibility and should be used when possible.
Two of the created accessible palettes (`travel.direction`, `country.lane`) contain 8 colours each, and only one accessible palette (`joyful.journey`) contains 6 colours each, and meet WCAG 2.0 AAA guidance.

Four of the created legacy palettes (`main.palette`, `electric.brights`, `just.beachy` and `cycling.hills`) have a contrast ratio of at least 4.5:1 to the bars adjacent to them, and alternate light and dark shades to further increase contrast. This is the highest standard of accessibility and should be used when possible.

Two of the created palettes (`mountain.train` and `clear.skies`) contain 6 colours each, and meet WCAG 2.0 AA guidance. All colours have a contrast ration of at least 3:1 to the bars adjacent to them, and alternate light and dark shades to further increase contrast. This is the minimum standard of accessibility required for publication and use should be limited to times when a larger palette is required.
Two of the created legacy palettes (`mountain.train` and `clear.skies`) have a contrast ration of at least 3:1 to the bars adjacent to them, and alternate light and dark shades to further increase contrast. This is the minimum standard of accessibility required for publication and use should be limited to times when a larger palette is required.

It is also possible to generate gradient palettes using this package, with colours based on the DfT corporate theme. While these palettes can be generated with any number of shades, there is no guarantee that the contrast between these colours is sufficient to meet accessibility standards. These palettes should only be used in very limited circumstances where colour is not the only means of distinguishing different groupings and none of the standard palettes are suitable.

For line charts, it may be possible that lines with reduced contrast are next to each other. As a result, and in line with GSS recommendation, line charts should be labelled directly where possible rather than using a legend.

50 changes: 32 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ The package can be installed directly from Github using the remotes

The package contains the following functions:

`scale_colour_dft`: ggplot function which applies one of a range of DfT
`scale_colour_dft`: ggplot function which applies one of a range of DfT
palettes to a ggplot line chart (or other chart which groups by
**colour**)

Expand All @@ -44,19 +44,32 @@ This theme also sets the x-axis intercept at y to 0.

## Colour palettes

The dftplotR package comes with 6 pre-loaded palettes. These contain
The dftplotR package comes with 9 pre-loaded palettes. These contain
colours taken from the DfT corporate colour scheme, and have also been
selected to meet accessibility guidance. The two primary palettes are
selected to meet accessibility guidance.

The palettes and the colours in them can be seen here, or visualised
within the package by calling `display.palette()` and the palette name.

### Accessible colours

These new colours were designed to be more accessible. Each colour has a high
contrast with both white and with the adjacent colours. In order to make your
charts more accessible, it is recommended to use the palettes presented below.

<img src="README_files/figure-gfm/unnamed-chunk-1-1.png" width="80%" style="display: block; margin: auto;" />

### Legacy colours

The dftplotr package also includes other legacy palettes, which are not as
accessible as the ones recommended above. The two primary palettes are
`main.palette`; a desaturated palette ideal for use in bar charts or
other area fill charts, and `electric.brights`, a saturated palette
which improves visibility in line-charts or other point colour charts.
The other palettes are ideal where these palettes are not appropriate,
or where variation is needed.

The palettes and the colours in them can be seen here, or visualised
within the package by calling `display.palette()` and the palette name.

<img src="README_files/figure-gfm/unnamed-chunk-1-1.png" width="80%" style="display: block; margin: auto;" />
<img src="README_files/figure-gfm/unnamed-chunk-2-1.png" width="80%" style="display: block; margin: auto;" />

## Gradient palettes

Expand All @@ -75,7 +88,7 @@ the `n =` argument, e.g. `n = 8` for a palette with 8 shades. When this
argument is not used, the default number of shades is 5. Example
gradient palettes with 5 shades can be seen below:

<img src="README_files/figure-gfm/unnamed-chunk-2-1.png" width="80%" style="display: block; margin: auto;" />
<img src="README_files/figure-gfm/unnamed-chunk-3-1.png" width="80%" style="display: block; margin: auto;" />

## ggplot2 themes

Expand All @@ -99,14 +112,13 @@ intercept of the x-axis with the y-axis to 0.
The difference between a bar plot without themeing and one with the
`theme_bar_dft` theme can be seen below:

<img src="README_files/figure-gfm/unnamed-chunk-3-1.png" width="50%" /><img src="README_files/figure-gfm/unnamed-chunk-3-2.png" width="50%" />
<img src="README_files/figure-gfm/unnamed-chunk-4-1.png" width="50%" /><img src="README_files/figure-gfm/unnamed-chunk-4-2.png" width="50%" />

## Palette picker tool

The palette picker tool is a Shiny tool which is now [available directly
here](https://rstudio-connect/palette_picker/) instead of bundled into the package. This tool allows
visualisation of all DfT corporate colours in two chart formats; line
and bar, to allow you to build and visualise your own custom palettes.
The palette picker tool is a Shiny tool which is now [available directly here](https://rstudio-connect/palette_picker/) instead of bundled into the package.
This tool allows visualisation of all DfT corporate colours in two chart formats;
line and bar, to allow you to build and visualise your own custom palettes.

It contains options to allow you to select a WCAG 2.0 accessibility
rating you require the palette to meet, and functions to show what that
Expand All @@ -124,15 +136,17 @@ common forms of colour blindness, and should also be discernable in
greyscale. The standard palettes in this package have been designed to
meet WCAG 2.0 accessibility guidance.

Four of the created palettes (`main.palette`, `electric.brights`,
`just.beachy` and `cycling.hills`) contain four colours each, and meet
WCAG 2.0 AAA guidance. All colours have a contrast ratio of at least
Two of the created accessible palettes (`travel.direction`, `country.lane`)
contain 8 colours each, and only one accessible palette (`joyful.journey`)
contains 6 colours each, and meet WCAG 2.0 AAA guidance.

Four of the created legacy palettes (`main.palette`, `electric.brights`,
`just.beachy` and `cycling.hills`) have a contrast ratio of at least
4.5:1 to the bars adjacent to them, and alternate light and dark shades
to further increase contrast. This is the highest standard of
accessibility and should be used when possible.

Two of the created palettes (`mountain.train` and `clear.skies`) contain
6 colours each, and meet WCAG 2.0 AA guidance. All colours have a
Two of the created legacy palettes (`mountain.train` and `clear.skies`) have a
contrast ration of at least 3:1 to the bars adjacent to them, and
alternate light and dark shades to further increase contrast. This is
the minimum standard of accessibility required for publication and use
Expand Down
Binary file modified README_files/figure-gfm/unnamed-chunk-1-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified README_files/figure-gfm/unnamed-chunk-2-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified README_files/figure-gfm/unnamed-chunk-3-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added README_files/figure-gfm/unnamed-chunk-4-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified README_files/figure-markdown_github/unnamed-chunk-1-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified README_files/figure-markdown_github/unnamed-chunk-2-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified README_files/figure-markdown_github/unnamed-chunk-3-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion man/dft.palettes.Rd

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit ab8ae31

Please sign in to comment.