Swiss Party Colors
This package offers party colors for most parties in Switzerland. Currently, around 50 parties have a corresponding color while another thirty parties are mentioned but have a grey color as they did not make a lot of votes in the past elections.
What's defined?
For each party, the following attributes are defined:
- Abbreviation: or short
abbr
in German (de), French (fr), Italian (it) or Rhaeto-Romanic (ro) - Name: the full name of the party in German (de), French (fr), Italian (it) or Rhaeto-Romanic (ro)
- Color: the main color that can be used for data visualization
- Black/White: write with either black or white on areas that have the main color
- Font Color: a font color to use for text on white backgrounds
- Font Color on Black: a font color to use for text on black backgrounds
Accessibility in mind
The font colors have the same hue as the main colors but a different lightness. They have been chosen so that the contrast to the background is at least 1 to 4.5 according to WebAIM. That means they can be used with a font size of 18.66px
while conforming to the WCAG Level AA.
Keep in mind: The formula to calculate contrast ratios is not perfect. A twitter thread has lead to the result that some entries in the column "Black/White" were changed to white in v1.1.0 even though the calcuation would suggest to use black on e.g. green.
Preview
This is how the colors for 14 of the most important parties in Switzerland look like. The abbreviations on the image are in German.
The colors have been chosen paying attention to the original color the parties use in their corporate design (mainly their logo). Secondly the colors were defined with the visual weight in mind. The lightness of all colors should be within a certain range so that no color looks heavier / more intense than any other. It was not possible that all colors have the same lightness in the HSL color system, but they are all not too bright and not too dark so that they can be used on dark and bright backgrounds:
Collaboration
The package downloads the color definitions from this Google Spreadsheet. Instead of making a pull request in this repository, feel free to add comments in the spreadsheet. SRF Data will update this repository after the spreadsheet has changed.
API
If you want to use the colors in your frontend javascript development, you can install the package as a node module:
npm install swiss-party-colors
yarn add swiss-party-colors
Afterwards, import the function you want to use in the language of choice:
import { getPartyDE as getParty } from 'swiss-party-colors'
import { getPartyNameDE as getPartyName } from 'swiss-party-colors'
import { getPartyColorDE as getPartyColor } from 'swiss-party-colors'
import { getBlackOrWhiteDE as getBlackOrWhite } from 'swiss-party-colors'
import { getPartyFontColorDE as getPartyFontColor } from 'swiss-party-colors'
import { getPartyFontColorOnBlackDE as getPartyFontColorOnBlack } from 'swiss-party-colors'
or use the generic version, in cases where the language is set on runtime:
import { getParty } from 'swiss-party-colors'
import { getPartyName } from 'swiss-party-colors'
import { getPartyColor } from 'swiss-party-colors'
import { getBlackOrWhite } from 'swiss-party-colors'
import { getPartyFontColor } from 'swiss-party-colors'
import { getPartyFontColorOnBlack } from 'swiss-party-colors'
getParty(abbreviation)
(generic: getParty(language, abbreviation)
)
Returns an object for a given party abbreviation with the following properties:
abbr
: the abbreviation itselfname
: the name of the partycolor
: the main color as a hex codeblackOrWhite
: black or white as a hex codefontColor
: the font color as a hex codefontColorOnBlack
: the font color for dark backgrounds as a hex code
getPartyName(abbreviation)
(generic: getPartyName(language, abbreviation)
)
Returns the full party name for a given party abbreviation
getPartyColor(abbreviation)
(generic: getPartyColor(language, abbreviation)
)
Returns the the main color as a hex code for a given party abbreviation
getBlackOrWhite(abbreviation)
(generic: getBlackOrWhite(language, abbreviation)
)
Returns black or white as a hex code for a given party abbreviation
getPartyFontColor(abbreviation)
(generic: getPartyFontColor(laguage, abbreviation)
)
Returns the font color as a hex code for a given party abbreviation
getPartyFontColorOnBlack(abbreviation)
(generic: getPartyFontColorOnBlack(language, abbreviation)
)
Returns the font color for dark backgrounds as a hex code for a given party abbreviation
get…ById
Since v1.1.2
parties also have IDs. The ID is in the first column of the Google Spreadsheet. It can make sense to work with these IDs in your code and display the names / abbreviations / colors only in the frontend. Especially for this use the following functions were introduced:
getPartyById (id, lang)
getPartyAbbrById (id, lang)
getPartyNameById (id, lang)
getPartyColorById (id)
getBlackOrWhiteById (id)
getPartyFontColorById (id)
getPartyFontColorOnBlackById (id)
They return the same as their abbreviaton-based counterparts documented above. The first three functions differ slightly as they also need a langauge code passed as an argument.
Lizenz
swiss-party-colors by SRF Data is licensed under a Creative Commons Namensnennung - Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).