Commit b4b88b00 authored by Laura Kalbag's avatar Laura Kalbag 😴

Move drafts back in as Site.js has had a fix for drafts

parent 6defb58e
---
title: "Index"
date: 2019-01-01T15:50:24Z
draft: true
tags: []
categories: []
body_classes: "blog"
colours:
primary-bg: "58,95%,83%" # hsl(58,95%,83%)
secondary-bg: "60,76%,76%" # hsl(60,76%,76%)
text: "212,47%,25%" # hsl(212,47%,25%)
linktext: "193,100%,19%" # hsl(193,100%,19%)
darklinktext: "0,0%,0%" # hsl(0,0%,0%)
brilliant: "208,100%,44%" # hsl(208,100%,44%)
tab-two: "83,45%,80%" # hsl(83,45%,80%)
tab-three: "152,28%,74%" # hsl(152,28%,74%)
tab-four: "189,37%,64%" # hsl(189,37%,64%)
tab-five: "200,54%,57%" # hsl(200,54%,57%)
tab-six: "205,68%,51%" # hsl(205,68%,51%)
image: ""
imagealt: ""
description: ""
imagealt: ""
---
Post text<!--more-->
---
title: "Dangerous data and understanding privilege"
date: 2019-03-06T09:04:12Z
draft: true
tags: ['data brokers', 'surveillance capitalism', 'facial recognition', 'privacy', 'inclusivity', 'accessibility', 'privilege']
categories: ['Bookmarks']
body_classes: "blog"
colours:
primary-bg: "58,95%,83%" # hsl(58,95%,83%)
secondary-bg: "60,76%,76%" # hsl(60,76%,76%)
text: "212,47%,25%" # hsl(212,47%,25%)
linktext: "193,100%,19%" # hsl(193,100%,19%)
darklinktext: "0,0%,0%" # hsl(0,0%,0%)
brilliant: "208,100%,44%" # hsl(208,100%,44%)
tab-two: "83,45%,80%" # hsl(83,45%,80%)
tab-three: "152,28%,74%" # hsl(152,28%,74%)
tab-four: "189,37%,64%" # hsl(189,37%,64%)
tab-five: "200,54%,57%" # hsl(200,54%,57%)
tab-six: "205,68%,51%" # hsl(205,68%,51%)
image: "bookmarks-2019-week-10/infographic_datalandscape1300.jpg"
imagealt: ""
---
The best bookmarks I saved in Week 10, 2019.<!--more-->
## Our data is used against us
### Here are the data brokers quietly buying and selling your personal information
By Steven Melendez AND Alex Pasternack on Fast Company
> “Apart from the dangers of merely collecting and storing all that data, detailed (and often erroneous) consumer profiles can lead to race or income-based discrimination, in a high-tech version of redlining.”
Article: [Here are the data brokers quietly buying and selling your personal information](https://www.fastcompany.com/90310803/here-are-the-data-brokers-quietly-buying-and-selling-your-personal-information)
{{< figure figcaption="Diagram mapping the commercial digital tracking and profiling landscape. Copyright Cracked Labs CC BY-SA 4.0">}}
{{< link href="https://crackedlabs.org/en/corporate-surveillance" >}}
{{< img src="infographic_datalandscape1300.jpg" alt="Diagram showing how data brokers in different industries such as customer data, marketing data, risk data, business IT and advertising technology, overlap." >}}
{{< /link >}}
{{< /figure >}}
### Don’t look now: why you should be worried about machines reading your emotions
By Oscar Schwartz on The Guardian
> “According to Meredith Whittaker, co-director of the New York University-based research institute AI Now, building machine learning applications based on Ekman’s outdated science is not just bad practice, it translates to real social harms.”
Article: [Don’t look now: why you should be worried about machines reading your emotions](https://www.theguardian.com/technology/2019/mar/06/facial-recognition-software-emotional-science)
### Revealed: Facebook’s global lobbying against data privacy laws
By Carole Cadwalladr and Duncan Campbell on The Guardian
> “The documents… reveal a secretive global lobbying operation targeting hundreds of legislators and regulators in an attempt to procure influence across the world, including in the UK, US, Canada, India, Vietnam, Argentina, Brazil, Malaysia and all 28 states of the EU.”
Article: [Revealed: Facebook’s global lobbying against data privacy laws](https://www.theguardian.com/technology/2019/mar/02/facebook-global-lobbying-campaign-against-data-privacy-laws-investment)
### Privacy complaints received by tech giants’ favorite EU watchdog up more than 2x since GDPR
By Natasha Lomas on Techcrunch
> “‘The phenomenon that is the GDPR has demonstrated one thing above all else: people’s interest in and appetite for understanding and controlling use of their personal data is anything but a reflection of apathy and fatalism,’ writes Helen Dixon, Ireland’s commissioner for data protection.”
Article: [Privacy complaints received by tech giants’ favorite EU watchdog up more than 2x since GDPR](https://techcrunch.com/2019/02/28/privacy-complaints-received-by-tech-giants-favorite-eu-watchdog-up-more-than-2x-since-gdpr)
### Nearly Half Of All ‘AI Startups’ Are Cashing In On Hype
By Parmy Olson on Forbes
> “Startups that are labelled as being in the field of artificial intelligence attract 15% to 50% more in their funding rounds than other technology startups…”
Article: [Nearly Half Of All ‘AI Startups’ Are Cashing In On Hype](https://www.forbes.com/sites/parmyolson/2019/03/04/nearly-half-of-all-ai-startups-are-cashing-in-on-hype)
### The real reason why Facebook and Google won’t change
By Shoshana Zuboff on Fast Company
> “These histories illustrate Facebook’s radical indifference, my term for the formal relationship between surveillance capitalists and their users. Facebook doesn’t care about disinformation, or mental health, or any of the other issues on Zuckerberg’s list of resolutions. Users are not customers, nor are they ‘the product.’ They are merely free sources of raw material.”
Article: [The real reason why Facebook and Google won’t change](https://www.fastcompany.com/90303274/why-facebook-and-google-wont-change)
## Understanding privilege
### Violence is not the only way LGBT+ people are ‘erased’
By Eva Wiseman on The Guardian
> “We can start with these stories, of preachers and beatings, but then we must widen our lens. To the covert message of assimilation that comes from assumed heterosexuality. From the lack of diverse representation in politics and on film, to what conversion therapy might look like in a time and place unruled by religion, where legislation around equality is outrunning the attitudes we see in schools and on the streets.”
Article: [Violence is not the only way LGBT+ people are ‘erased’](https://www.theguardian.com/lifeandstyle/2019/mar/03/violence-is-not-the-only-way-lgbt-people-are-erased-eva-wiseman)
### To My Fellow White Others
By Chase Strangio on The Progressive
> “Our duty as white people who are Othered in society is to name the ways in which our discrimination, our hurt, our alienation, does not erase the power we simultaneously hold, and to watch for the ways it also serves white supremacy.”
Article: [To My Fellow White Others](https://progressive.org/magazine/to-my-fellow-white-others-strangio/)
## Accessibility toolkit
### Semantics to Screen Readers
By Melanie Richards on A List Apart
> “If you make websites, you may have tested your sites with a screen reader. But how do these and other assistive programs actually access your content? What information do they use?”
Article: [Semantics to Screen Readers](https://alistapart.com/article/semantics-to-screen-readers)
### Tips to Create an Accessible and Contrasted Color Palette
By Stéphanie Walter
> “Let’s be clear from the start: color contrast will concern every one of you users. Everybody struggles at some point with issues linked to lack of contrast in interfaces and websites, color blind or not.”
Article: [Tips to Create an Accessible and Contrasted Color Palette](https://stephaniewalter.design/blog/tips-create-accessible-color-palette/)
---
title: "Making RSS in 2020"
date: 2020-03-31T10:22:09Z
draft: true
tags: ["RSS", "blogs", "Site.js"]
categories: ["Small Technology Foundation"]
body_classes: "blog"
colours:
primary-bg: "191,100%,90%" # hsl(191,100%,90%)
secondary-bg: "192,69%,81%" # hsl(192,69%,81%)
text: "4,61%,34%" # hsl(4,61%,34%)
linktext: "21,85%,35%" # hsl(21,85%,35%)
darklinktext: "14,37%,11%" # hsl(14,37%,11%)
brilliant: "28,90%,60%" # hsl(28,90%,60%)
tab-two: "156,29%,86%" # hsl(156,29%,86%)
tab-three: "55,25%,80%" # hsl(55,25%,80%)
tab-four: "36,52%,75%" # hsl(36,52%,75%)
tab-five: "33,68%,70%" # hsl(33,68%,70%)
tab-six: "30,81%,65%" # hsl(30,81%,65%)
image: ""
imagealt: ""
description: ""
---
I love a good RSS feed. As mentioned previously in [my post about How to read RSS in 2020](/how-to-read-rss-in-2020), I’ve been working on a starter blog for people to use with [Site.js](https://sitejs.org). It’s all very nice to provide RSS feeds by default in a theme, and [explain to a site’s readers how to use RSS](/how-to-read-rss-in-2020), but I also have big opinions on the structure of the post in an RSS feed. So often the RSS template suffers from a woeful lack of attention. It’s desperately clear that many sites with RSS feeds either use the default template that comes with their CMS (content management system) or aren’t really aware that they’re outputting an RSS feed at all. It’s a shame because I think we can do a lot to improve the reading experience for those who favour RSS.
## Full content or go home
If your RSS feed only shows an excerpt of the blog post, don’t bother. It removes all value from using an RSS feed in the first place. Unless your content absolutely cannot be rendered inside a feed reader, there is no excuse. If your excuse is “I need people to visit my site so I can track them to make money”, RSS feeds aren’t for you. They’re more in the spirit of sharing and enabling independence, not surveilling and mining people’s personal data. One of the big benefits of RSS from a reader’s perspective is the lack of tracking. If you embed tracking in RSS, you are a bad person.
## Use semantic HTML
RSS doesn’t include your CSS, much like a [browser’s Reader/Reading view](https://duckduckgo.com/?q=reader+view+browser). Which gives us yet another reason to [use semantic HTML](https://24ways.org/2017/accessibility-through-semantic-html/) or semantic markdown. (The number one reason to use semantic HTML is, of course, for [accessibility](https://webaim.org/techniques/semanticstructure/).) If you’re writing a list, use `<ul>` or `<ol>`. If you’re quoting someone, use `<blockquote>`. Use headings (`<h1>`,`<h2>`,`<h3>`) hierarchically to segment lengthy content to make it easier to read. If you’re including a image with a caption, use `<figure>` and `<figcaption>`. A feed reader will style these elements so their meaning is still clear, whereas it will ignore your `<div>`s and `<span>`s. Nobody wants to be writing multiple versions of their content specifically for RSS or Reader views, so it makes sense to make your content as flexible as possible and use semantic HTML for everything.
Below is [an article on A List Apart](https://alistapart.com/article/cross-cultural-design/) as rendered in the browser with fancy CSS:
{{< img src="article-text.png" alt="Screenshot of image and caption which are styled with CSS." >}}
Compare that to the same article rendered in the Feedbin feed reader. The caption styling is different, but it’s still clear that it’s a caption:
{{< img src="rss-text.png" alt="Screenshot the same image and caption, showing subtly different styling." >}}
## Don’t be afraid to have multiple feeds
People aren’t necessarily after a feed of everything you publish all the time. If you’ve got different sections on your site, it’s helpful to provide separate feeds for those sections. On my site I have separate feeds for the more work-related stuff I produce, like [my blog](/posts) or [my recommended reads](/lens), and my more personal stuff like [notes](/notes) and [photos](/photos) that are more like social media feeds. There is still an [all-in-one feed](https://laurakalbag.com/index.xml) for my whole site, but I wouldn’t recommend it unless you *really* like me.
## Designing for RSS
It’s obvious when a site has put effort into its RSS feed. Little touches like a descriptive (but not too long!) feed title can make all the difference.
{{< figure figcaption="Some of the feed titles in my subscriptions. Much like <title>s, it can come down to personal preference, but it’s useful to include the site name!" >}}
{{< img src="titles.png" alt="Subscription titles: 24 ways, A List Apart: The Full Feed, Adactio (Jeremy Keith), All in the head, Articles - Cloud Four, Articles on Smashing Magazine -- For Web Designers and Developers, Ben Byford - Works." max-width="500px" >}}
{{< /figure >}}
### Customise your template depending on your feed’s content
If you write short posts, like status updates, it’s worth
Link back to original post/article
## Make your feeds easy to discover for both technology and humans
- linking to original resource and/or site in content, not just heading
- make your RSS feeds visible to tech and humans
\ No newline at end of file
---
title: "Privacy doesn’t mean we can’t have nice toys"
date: 2019-03-21T09:27:10Z
draft: true
tags: ["privacy", "social justice", "“innovation”"]
categories: ["Privacy"]
body_classes: "blog"
colours:
primary-bg: "3,100%,92%" # hsl(3,100%,92%)
secondary-bg: "5,100%,89%" # hsl(5,100%,89%)
text: "195,100%,20%" # hsl(195,100%,20%)
linktext: "195,100%,25%" # hsl(195,100%,25%)
darklinktext: "195,70%,14%" # hsl(195,70%,14%)
brilliant: "196,100%,42%" # hsl(196,100%,42%)
tab-two: "278,9%,83%" # hsl(278,9%,83%)
tab-three: "205,35%,76%" # hsl(205,35%,76%)
tab-four: "199,52%,67%" # hsl(199,52%,67%)
tab-five: "197,62%,59%" # hsl(197,62%,59%)
tab-six: "196,68%,51%" # hsl(196,68%,51%)
---
[Actually, I want to hand over even more of my personal data to big tech](https://www.fastcompany.com/90315789/actually-i-want-to-hand-over-even-more-of-my-data-to-big-tech).” This article popping up in my RSS feed this morning has irritated me immensely. Not least because two other articles in the series, [Trading privacy for survival is another tax on the poor](https://www.fastcompany.com/90317495/another-tax-on-the-poor-surrendering-privacy-for-survival) and [How the tragic death of Do Not Track ruined the web for everyone](https://www.fastcompany.com/90308068/how-the-tragic-death-of-do-not-track-ruined-the-web-for-everyone), were so insightful. It’s a weak statement that presents a dichotomy where none exists. It knows it’s being contrarian, and the intentions behind statements like this should concern us.<!--more-->
Privacy and innovation are not in opposition.
Privacy in technology is our right as individuals to choose what we want to share, and what we want to keep to ourselves. It is our right to not have personal data about us shared without our consent, and for it to be used against us. And our data is often used against us, as that article I mentioned before, [Trading privacy for survival is another tax on the poor](https://www.fastcompany.com/90317495/another-tax-on-the-poor-surrendering-privacy-for-survival), explains so well.
I hate using the term *innovation* because it has been co-opted by men in suits who make elaborate pitches for fairy dust technologies they barely understand. Innovation is simply new technology, using ideas and processes that do not already exist. Innovation in technology does not necessarily require invasion of our privacy, the exploitation of our personal data, or everything in the world being connected in a massive dystopian data hive.
My concern is that articles implying that handing over our personal data is necessary to innovation are just repeating the same messages that big tech corporations, and their investors, want us to believe. They want us to accept that surveillance capitalism, the practice of extracting our personal data and using it for financial gain, is the only way technology can thrive, and the only way we can get the toys we want. Sure, it is the prevailing model. As Shoshana Zuboff says in the Age of Surveillance Capitalism, “[Surveillance Capitalism’s] mechanisms and economic imperatives have become the default model for most internet-based businesses.” But surveillance capitalism is not the only way, and it is certainly not for our benefit.
> “Surveillance capitalism operates through unprecedented asymmetries in knowledge and the power that accrues to knowledge. Surveillance capitalists know everything *about us*, whereas their operations are designed to be unknowable *to us*. They accumulate vast domains of new knowledge *from us*, but not *for us*. They predict our futures for the sake of others’ gain, not ours.” —Shoshana Zuboff, The Age of Surveillance Capitalism.
Another concern of mine is that articles claiming privacy must die for cool technology to flourish is that the articles are not written by people who understand the underlying technology. The danger of continually citing the “expert opinions” of people running, or working for, big tech businesses, is that you’ll likely amplify their hype rather than report facts. The additional danger of garnering expertise from privileged people unfamiliar with the plights of marginalised communities, is that they are ill-equipped to understand the real impact that [profiling](https://www.nytimes.com/interactive/2018/12/10/business/location-data-privacy-apps.html), [algorithmic decision-making](https://www.vox.com/future-perfect/2019/3/5/18251924/self-driving-car-racial-bias-study-autonomous-vehicle-dark-skin) and [targeted propaganda](https://privacyinternational.org/press-release/2032/privacy-international-asks-major-uk-political-parties-commit-not-using-legal) can have on people’s lives.
Technology that gives us insight on our own behaviour is feasible without invading our privacy. Technology that makes our homes intelligent is feasible without invading our privacy. Technology that connects us to people across the world is feasible without invading our privacy. We can still have the shiny things without them having to spy on us. We could even have targeted ads that do not invade our privacy (whether we actually want this is a topic for another day…)
Much of the technology we use today could utilise our personal data without our data leaving our devices. We can communicate with each other without a corporation having access to our private messages. [Projects like this have existed](https://www.kickstarter.com/projects/edisonn/project-lima-a-one-way-internet-highway-by-0pii), and [more exist](https://cabal-club.github.io), but they are not mainstream.
In part, they are not mainstream because the architecture is not developed to the extent of cloud-based surveillance systems. The vast majority of web architecture, libraries and developer tools are designed for cloud-based surveillance systems. They may feature some options for self-hosting, or encryption of particular elements, but they are still entangled with particular cloud services or servers. It is incredibly time-consuming to [utilise existing architecture but adapt it to respect people’s privacy](https://source.ind.ie/hypha/tools/acme-tls/activity). And many of the people working to build privacy-respecting technology have to work on these projects unpaid and in their free time. This worries me because it near-guarantees the only people working on alternatives to surveillance-based technologies are those who have free time, or those who can afford to work unpaid. Those people are invariably privileged, and not from marginalised communities. Which means there are greater chances of building new technologies that can cause harm in different ways, like [amplifying hate speech](https://alistapart.com/article/canary-in-a-coal-mine-how-tech-provides-platforms-for-hate).
The primary reason privacy-respecting innovative technology is not mainstream is because it is not funded. We do not have the economic models to support this technology because mainstream technology is mostly funded by venture capital. Venture capital’s desire for fast growth and “exits” through sale to bigger corporations or becoming a publicly-traded entity, further feeds the surveillance economy.
Privacy-respecting innovative technology is not infeasible, but we need economic models to support it. There is hope, we just need to stoke its fires.
---
title: "Index"
date: 2019-02-05T15:51:47Z
draft: true
body_classes: "blog"
colours:
primary-bg: "58,95%,83%" # hsl(58,95%,83%)
secondary-bg: "60,76%,76%" # hsl(60,76%,76%)
text: "212,47%,25%" # hsl(212,47%,25%)
linktext: "193,100%,19%" # hsl(193,100%,19%)
darklinktext: "0,0%,0%" # hsl(0,0%,0%)
brilliant: "208,100%,44%" # hsl(208,100%,44%)
tab-two: "83,45%,80%" # hsl(83,45%,80%)
tab-three: "152,28%,74%" # hsl(152,28%,74%)
tab-four: "189,37%,64%" # hsl(189,37%,64%)
tab-five: "200,54%,57%" # hsl(200,54%,57%)
tab-six: "205,68%,51%" # hsl(205,68%,51%)
image: ""
imagealt: ""
description: ""
imagealt: ""
---
Post text<!--more-->
### How Silicon Valley Puts the ‘Con’ in Consent
[New York Times:How Silicon Valley Puts the ‘Con’ in Consent by Editorial Board](https://www.nytimes.com/2019/02/02/opinion/internet-facebook-google-consent.html)
> “Data is powerful and can inform on us in unexpected ways. Companies learn all about you, but also all about your friends who haven’t signed up for these services. Consumers’ confusion about this gives rise to conspiracy theories that phone microphones are secretly snooping on users. According to academics who have done the research, that’s probably just paranoia. The likely truth is that all the other data you give away is enough to predict what you have said and will say in conversations.”
\ No newline at end of file
---
title: "Some ways to create accessible colour palettes"
date: 2020-03-31T18:06:18+01:00
draft: true
tags: ["colour", "accessibility", "Site.js"]
categories: ["Site.js"]
body_classes: "blog"
colours:
primary-bg: "58,95%,83%" # hsl(58,95%,83%)
secondary-bg: "60,76%,76%" # hsl(60,76%,76%)
text: "212,47%,25%" # hsl(212,47%,25%)
linktext: "193,100%,19%" # hsl(193,100%,19%)
darklinktext: "0,0%,0%" # hsl(0,0%,0%)
brilliant: "208,100%,44%" # hsl(208,100%,44%)
tab-two: "83,45%,80%" # hsl(83,45%,80%)
tab-three: "152,28%,74%" # hsl(152,28%,74%)
tab-four: "189,37%,64%" # hsl(189,37%,64%)
tab-five: "200,54%,57%" # hsl(200,54%,57%)
tab-six: "205,68%,51%" # hsl(205,68%,51%)
image: ""
imagealt: ""
description: ""
---
*What you don’t cope with pandemic anxiety by building a complicated system to derive colour palettes with accessible colour contrasts?* [Earlier I posted a screenshot of my work in progress on some palettes](/notes/140/) for the Site.js starter blog theme. Some folk wanted me to share more, so here comes some colour nerdery…<!--more-->
{{< figure figcaption="My work in progress…" >}}
{{< img src="screenshot.png" alt="Rainbow of colour swatches with same levels of saturation and luminosity, and colour themed sets of swatches for different text and background pairs." >}}
{{< /figure >}}
I’m a fan of colour as you can probably tell from my website. And while I tend to err on the side of over-the-top in my personal projects, I won’t compromise on accessibility. There’s no point having pretty colours if people can’t read your text. I make websites not art.
There are two big factors when it comes to colour and accessibility:
1. Colour should not be used as the only way to convey information.
2. Text colours should be a reasonable contrast against background colours.
(Have you read [Geri Coady’s Colour Accessibility Workflows book](https://abookapart.com/products/color-accessibility-workflows)? It’s really great, and I recommend that for a more in-depth discussion.)
## Text colour contrast
As individuals with varying degrees of eyesight and colour perception, it’s difficult to judge what’s a reasonable colour contrast. Fortunately, the WCAG (Web Content Accessibility Guidelines) have done the maths and given specific guidelines on colour contrast: [Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced). Level AA is the minimum requirement for conformance, and AAA is the highest level of conformance.
>How to Meet Contrast (Minimum) (Level AA)
>The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
>Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
>Success Criterion 1.4.6 Contrast (Enhanced) (Level AAA)
>The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
>Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
Whenever I create colour palettes in my work, I’m guided by these recommendations, and a couple of tools to test my contrast choices against these numbers.
Note: If you’re after an in-depth explanation of colour accessibility, or tools to create accessible colour palettes, [Stéphanie Walter’s blog post on Color accessibility: tools and resources to help you design inclusive products](https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/) is an incredibly thorough collection of advice and tools. I’m going to focus more on the thought process on creating an accessible colour palette from scratch.
### Things I know to be mostly true
Over my last decade or so of designing for the web, I’ve come to hold some time-saving tips to be true:
- It’s really hard to make orange or yellow work as text or a background with sufficient contrast. If you go light, you’ll get cream or peach. If you go dark, you’ll get brown. Great if you’re into a 70s aesthetic but will otherwise look dated. Unless you’re working with a brand colour, forget yellow and orange.
- The lightest grey text you can get away with on a white background is <mark style="background: #fff; color:#595959; padding-left: 0.25em; padding-right: 0.25em; font-weight: bold;">#595959</mark> grey for AAA conformance and <mark style="padding-left: 0.25em; padding-right: 0.25em; margin-top:0; background: #fff; color:#595959; font-weight: bold;">#767676</mark> grey for AA conformance. If I see either of these colours (or a close hex code) in someone’s CSS, I have a little knowing smile moment. I know what that designer/developer has done, and I don’t hate them for it.
- High contrast is not as bad as low contrast, but can be really hard work on the eyes. <mark style="padding-left: 0.25em; padding-right: 0.25em; background: #fff; color: #000;">#000 black on #fff white</mark> (or <mark style="padding-left: 0.25em; padding-right: 0.25em; background: #000; color: #fff;">white on black</mark>) can make the text appear to be moving. It’s useful to contrast black or white with a grey that is off-white or off-black to benefit most people’s reading experiences. ([Though many people benefit from high contrast modes and I recommend reading about how to accomodate their needs too!](https://developer.paciellogroup.com/blog/?s=high+contrast))
- A page is easier to read continuously if all the text is a similar contrast against the background. If a page is using all dark text on light, it’s very jarring if you suddenly come across <mark style="padding-left: 0.25em; padding-right: 0.25em; background: #000; color: #fff;">light text on dark</mark>. Sometimes you can use that change in contrast to draw attention to buttons or other outstanding elements. But it increases the cognitive load. Another place I come across this problem is in links. You want link text to stand out and I’m all for using colour alongside underlines (please [always underline links](http://www.webaxe.org/keep-the-underline-text-links/)!) to make links more distinctive, but if the colour is much lighter or much darker than the rest of the text, it again makes the text harder to read and increases the cognitive load.
## I’m making a theme
As I mentioned above, I’m making a theme for a blog that uses Site.js (and Hugo). Designing colour palettes for themes have an advantage, because you’re not constrained by brand colours, however sometimes constraints are useful as a starting point. I want to give people a few colour choices for the theme, to make customisation easy, so I initially settled on some arbitrary palette restrictions. Firstly, a light on dark theme and a dark on light theme. These may end up being options for a light mode and [dark mode](https://css-tricks.com/dark-modes-with-css/). On top of those basic themes, I decided to add some “highlight” colours that can be used for acccents, and brighten up the page. My initial arbitrary choices were blue, pink, green and red. Fairly popular colours for websites.
### Required colours
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment