Pick saturated WCAG colors with ease

better color choice

WCAG color palette to pick color with good color ratio.

English

Universal Design

In web design, ensuring accessibility is crucial, especially when it comes to color choices. I've developed a simple tool featuring two gradient palettes to simplify color selection while adhering to Web Content Accessibility Guidelines (WCAG).

For starters, consider your background color or text color—whether it's white or black. Then, use the palette to pick saturated accent colors to meet WCAG standards.

There are a lot more tones out there, these are the most saturated rich colors.

For colors on white, elements like large headings or logos, opt for colors with a contrast ratio of at least 3:1, these are found above the first line in the palette. For smaller text and finer details, select colors below the next line, ensuring a contrast ratio of 4.5:1.

To future-proof your design and ensure accessibility, aim for colors below the third line in the palette, offering a contrast ratio of 7:1.

For colors on black, we. often go for colors closer to 7:1. On dark backgrounds colors with contrast ratio of 3:1 can be a bit to dark, but there’s the limit.

Download the Palette and find accent color to use for screen. If you need to keep contrast between two different colors, use a tool like colorcontrast.cc for precise control over the ratio.

Design with accessibility in mind. Good luck!

Norsk

Universell utforming

Innen webdesign er det avgjørende å sikre tilgjengelighet, spesielt når det gjelder fargevalg. Jeg har utviklet et enkelt verktøy, to gradientpaletter for å forenkle fargevalget samtidig som man følger retningslinjene for tilgjengelighet på nett (WCAG).

For å komme i gang, ta hensyn til bakgrunnsfargen eller tekstfargen din - enten den er hvit eller svart. Deretter bruker du paletten til å velge mettede aksentfarger som oppfyller WCAG-standarden.

Det finnes mange flere fargetoner der ute, men dette er de mest mettede tonene.

Farger på hvit med innholdselementer som store overskrifter eller logoer, velger en farger med et kontrastforhold på minst 3:1, disse finner du over den første linjen i paletten. For mindre tekst og tynne detaljer, velg farger under den neste linjen for å sikre et kontrastforhold på 4.5:1.

For å fremtidssikre designet ditt bør du velge farger under den tredje linjen i paletten, som gir et kontrastforhold på 7:1.

Farger på svart bakgrunn begynner man nok med en større kontrast i utgangspunktet nærmere 7:1. Kontrast på svart er 3:1 nok i mørkeste laget, men opp til deg, der går i hvert fall grensen.

Last ned paletten og finn aksentfarger til å bruke på skjerm. Hvis du trenger kontrasten mellom to forskjellige farger og som ikke svart eller hvit, bruk et verktøy som colorcontrast.cc for mer nøyaktig kontroll over kontrastforholdet.

Design med tilgjengelighet i tankene. Lykke til!

Animated Lottie Logo on Squarespace

I’ve done some updates at this site and created a new logoanimation.

But it took some time to find the right solution, so here’s a short guide on how to set it up.

Add the logoanimation

First we need to add the JSON-file to the site. This is just a placeholder so we have it visible some where. A perfect spot is in the footer, since that is rendered on every page.

So Edit the footer at the bottom of the site and add a </>Code block.

In my case I added this:

<dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

And if you want it to link back to your index page (first page), add this before and after the lottie.

<a href="/"></a>

Like this:

<a href="/"><dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player></a>

Add the engine

Next we'll find Website Tools. Go into Website, Pages and scroll down and find Website Tools.

Here you are going to add the Java Script driver so the site understands how a JSON-file from Lottie should be played.

Scroll down to the Footer and add this script code.

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

So this is adding the engine to your site. Every Lottie JSON file will now be played like it was a native solution.

Move it to the header

Then we need to change the position of the </>Code block to the menu.

In the code below, the div#... is the code-block div number and unique name for that div block. This will have a totally different name on your site and will change if you for instance add a new code-block. Use Inspector/Inspect in your browser of choice to pick that name.

The div#... will then switched placement with the .site-title. The Class name, the .site-title, can be different on your site, so change it accordingly. So the code is:

<script>

  $(document).ready(function() { 

		$('div#block-yui_3_17_2_1_1705391194356_4861').appendTo('.site-title');

	});

</script>

Hide the old logo

Then we need to hide the old logo. If you use text only as a logo use .site-title or something similar. If it's an image use .site-title img, and display none will hide the old logo.

<style>

  .site-title img{

    display: none;

}

</style>

That’s it. Hope it works for you too, and comment here if there’s any questions.

Making my site come alive with GifGun

I’ve updated my site with small GIF animations.

Yes good old GIFs, the easiest way to create a moving images, when it’s not clean graphics. I’ve done a lot of web-animation that are SVG based and way more flexible and economic in “physical” size, but sometimes it’s only GIF that delivers.

And in this case I wanted to show some logos in context.

So how to make simple and quick GIF without pulling all your hears out?

A GIF are usually horrible to work with, in Photoshop, but with the simple plug-in for After Effects called GifGun it’s possible to fine tune and create a GIF that looks good and don’t end up as a 60 MB behemoth.

All the examples are from 500 KB to 2 MB.

A last trick is to only have a small part of the image that moves, so the freezed parts are only rendered ones.

So say hello to some simple and great updates to web-animation page :)

Subshine website

I’ve helped Ole Gunnar Gundersen a lot with his music project Subshine.

The music is great and he needed also a great site to show it of.

Here you find the music videos, tour dates and more.

Conductor of Light product showcase

As a further development of the Conductor of Light brand and webstore we created a new product show case.

The reflective tweed button is a new type of product, and unusual in its product segment. Typically a reflector is a piece of plastic, Conductor of Light is a more little piece of jewelry of fabric and reflective thread, with a sensible function. To help understand what the product is, and to give a sense and felling, usage and function, it needs a good presentation.

Every colour has now it's own identifier that communicate a feeling. Gentle grey is a rainy grey day in a Norwegian fjord, Vibrant Yellow is the strong winter sun at the top of a mountain, Blueberry blue is a succulent blueberries, Forest Green is a autumn foggy pine forest, striking red is the warm red sunset and Perfect plum is some ripe plums ready to be eaten :)

The identity is a combination of British Tweed culture, Norwegian weather and light, and the autumn/winter season.

Why you should stop using Chrome!

Over a couple of weeks I have tried to fix an image problem. All the images I uploaded to a site looked really blurry on Chrome. Of course this post can be out of date any day, but February 2018 this is relevant :)

Chromes doesn't handle image scaling very well. These days with responsive design, we design sites with percentages, will sites and images be shown in many different sizes. It's crucial that everything looks good on any platform.

View fullsize

View fullsize

Firefox 58 and Internet Explorer 11 (haven't tried on Edge or Opera), look like expected, small size thumbnail images is crispy clear.

But Chromes result looks out of focus and horrible. Yes, this can be seen as nitpicking, but as shown in the picture above you can see the difference clearly.

And weirdly enough theres is an easy fix, and why this isn't standard on Chrome beats me.

To gain a better result, add this code to you CSS:

image-rendering: -webkit-optimize-contrast

View fullsize

View fullsize

Since most sites don't have this image-rendering CSS added to their site, you are guaranteed that the web looks worse on Chrome. Use Firefox! :) Images in Firefox are even sharper than the image-rendering enhancement.

View fullsize

Here I flip between Firefox, IE 11, Chrome and Firefox

View fullsize

Here I flip between Chrome and Firefox

PS: I have nothing to do with firefox, I only want you to have the best web-experience possible :)

Scrolling web-animation for DNF

I've been working with Neue on several projects this year and now a new part of my work has been released. It's logo web-animation to the site Den Norske Filmskolen (DNF).

This project I needed extra reinforcement because it needed java scripting, and my buddy Ola Marvin Leier were up to the task. I made the animation of the DNF logo and he did the scripting trickery to make the logo move and behave as we wanted it. When you scroll it activates the animated sequence, and to add some randomness if you reload or explore the site the animation have different states. And maybe the best part the size are tiny, for the animation around 18 KB.

This is a relative new way of creating flexible and tiny sized animations for the web using After Effects, bodymovin and java scripting.

See the logo animation in action here, and remember to explore the site:

Katrin Berge portfolio site

We have now published Katrin Berges' new portfolio site!

We've worked on this for some time, and shes been eager to release the site as fast as possible, And now it's here!

She does hand drawn illustration of the mystical kind.