DEV Community: Tringa Krasniqi

Testing for Color Contrast: Tips and Tools

Tringa Krasniqi — Fri, 28 Jan 2022 11:08:16 +0000

Testing for accessibility is a must but not easy, it means testing for various use cases, and of course, all parts of your application. Color contrast is among the simplest of accessibility requirements that you can and should ensure you're meeting. Plus, it will result in great usability improvement for ALL types of users.

Content is the most important part of your application, right? So imagine not being able to read it because of colors! Therefore, ensuring enough color contrast means ensuring that all your content is readable to all the sighted users. Let's explore a few things you should keep in mind.

Color contrast ratio requirements

The WAI-WCAG guidelines defines the minimum requirements to follow so you have proper color contrast. They are:

4.5:1 ratio for normal sized and smaller text
3:1 ratio for large text because it is easier to be read than smaller sizes
3:1 same ratio also for meaningful non-textual elements
logos, decorative images, and disabled elements are excluded from these requirements.

The contrast ratio is a calculation of the difference in color based on brightness and luminosity. It is not as important to understand how it is calculated, as many tools that do this will be mentioned in the sections below.

Testing

The first thing to do is to audit your app and identify the information which is valuable and needs to be tested. This includes all text content, visuals (such as images, input borders, etc.), focusable elements, and so on.

Textual content

It is important that all text of your page is readable, so sometimes even if we meet the 4.5:1 ratio, it still can be difficult to read, for example:

This is why the above requirements are only a minimum, and always aim for a higher contrast ratio. However, this does not mean that all possible colors of your app must meet the ratios, what is important is the combination of these colors. Some tools to test text contrast are:

Edge developer tools - opening developer tools and then, inspecting the color of an HTML element will show the contrast ratio in the color picker. Within the color picker, you can change the color on the fly while showing with a ✔️ if you're meeting the minimum rations or not. The image below shows the color picker where the colors meet the contrast ratio of enhanced (AAA) level.

Contrast-ratio - is another great tool where you can enter the color codes manually, and it will show the ratio as a number marked with green if this color combination passed the contrast requirement, or red if it doesn't.

** Text on images ** must fulfill the same requirements mentioned above. It is important especially on parts of content where the image on the background is dynamic and not known beforehand. One simple solution to this is adding a background shadow that makes the text visible independently from the image. Example from Bing search page:

The Color Contrast Analyzer chrome extension is great for checking color contrast for both text and images of text. It offers the possibility to scan for two levels (AA and AAA) of ARIA requirements. The extension applies a mask and highlights only the parts of the UI which fulfill the color contrast, e.g:

The image below is the result after the color analysis where the highlighted parts do meet the contrast ratio.

This tool also works great for testing text-based content as well, e.g:

Visual content

Images and icons are valuable content too that needs to be visible without extra effort by the user. The general rule is that they should meet at least a 3:1 contrast ratio against adjacent colors. For example, in the image below, the magnifier icon meets the requirement with the gray color of the icon. However, the whole icon does not meet the contrast ratio in comparison to the background image (fun exercise: can you understand what the icon is?).

Use of color

The meaning of content should never be conveyed only with color, because users that have problems distinguishing colors, or using the high contrast mode (windows) will not be able to understand it. The image below has a list of blog posts titles that are categorized by colors, where blue stands for "JavaScript", yellow for "Programming", and black for "UX".

However, when switching to high contrast mode in windows, this meaning is lost because the colors are removed and all that is left are white circles. This is shown in the image below:

On the other hand, when we add color and text alternatives we provide two ways for users to get the same information. The image below shows the same list, with the same colors, but with text next to it:

And, in high contrast mode that we do not have the colors, the text provides the needed information, so we do not depend only on color to get the meaning.

So, always make sure to use either color and text, or color and pattern.

Interactive elements

Elements on the page such as links, menus, buttons, etc. (also referred to as controls) have temporary states which depending on the design have different styling. Make sure to use CSS selectors such as :focus, :hover to define the colors for these states. The WCAG guidelines do not give any specifications when it comes to the colors of the states. However, the text inside those interactive elements must always meet the above-mentioned requirements.

Additionally, when navigating with a keyboard only, controls need to have a focus indicator that is easily noticeable and visible. It used to be common to remove the focus ring using the

outline: none

, but this is a bad practice. The outline none will make your app unusable for keyboard users. Besides, the default focus ring is different for many browsers, some show it as a blue outline or black, etc. which might not be visible enough if your design uses a similar color. The best way to handle this is customizing the outline based on your design with simple CSS, for example:

button:focus {
 outline: 2 px solid purple;
 outline-offset: 2px
}

will give us the following result:

Conclusion

This post is not an exhaustive list of tools and cases that you should test for because each application has its own edge cases that should be considered. Further, the best way to get most of the testing is using a combination of the tools that are mentioned in this post. Most important takeaways:

Always make sure the text meets at least the contrast ratio (4.5:1 for small text, 3:1 for large text).
Images and icons must also have enough contrast so they are visible (3:1 contrast ratio).
Logos and disabled elements do not have any contrast ratio requirements.
Never depend on color only to convey meaning, always use another alternative way.
States for controls must also be tested for contrast and the focus ring must always be distinguishable.

Hope you found this helpful🌟!

Happy coding 👩‍💻!

Other tools:

axe-dev-tools chrome extension is a great tool that analyzes your page and shows you the list of violations and how to fix them.
Accessibility Insights chrome extension is a great tool that has testing for more aspects of accessibility other than color contrast. It also has many checklists that will help you with manual testing too.

Resources

WebAIM - Contrast and color accessibility
WCAG Success criterion 1.4.3 - Minimum requirements for color contrast
Color contrast analyzer guide by eBay, OATMEAL handbook
WCAG guidelines - Ensuring contrast ratio for icons

Core building blocks of React

Tringa Krasniqi — Mon, 17 Feb 2020 20:06:43 +0000

Hello DEV community!

Every time I start learning something new I always do a short list of main concepts in order to have it handy when diving deeper into other concepts. It really always comes in handy!

I started learning React few weeks ago and since then I committed that I will learn something new everyday and also, I decided that I will document this journey by sharing my own understandings and knowledge :)

This article is all about the core building block of React, such as:

JSX
Components
State and props
Conditional rendering

So, let's start!

JSX

Before starting to discussing any concept of React, we must always remember that everything in react is JS (JavaScript) even if doesn't look like it!

var jsx_element = <h1>hi!</h1>;

The variable declaration above, doesn't look either like HTML nor like JS, right?

That is because JSX is used, which is a syntax extension to JS, and in the end it all compiles to JS code using Babel (compiler for next-gen JS). Therefore, we can use any JS expressions such as variables, getting object properties or even calling functions within JSX code by enclosing it in curly braces '{}'.

var address = {
  street: 'oxford street',
  number: 14,
  postcode: '3344'
  city : 'London'
  country: 'England'
}

const getAddress({street, number}) {
   return street + ' ' + number;
}


const jsx_element = <div>
                        <h1>{getAddress(address)}</h1>
                    </div>;

ReactDOM.render(
  jsx_element,
  document.getElementById('root')
);

You can notice on the example above that the curly braces are used in order to fetch the address in as string type by calling the getAddress function within the JSX code.

Components

Components is a concept that helps to enforce the single-responsibility principle in React. We should think of components as reusable pieces of our application, where each one performs (ideally) exactly one responsibility/task. In simple words, a component is a function that accepts data (props) and specifies how those data should appear in UI.

A component can be either a class-based or a function-based.

Class-based

A class-based component is also known as a stateful component or container component and it is created as follows:

import React, Component from 'react';

class App extends Compoenent {
   render() {
     return(
       /* <div>JSX</div> */
      )
   }
}
exports default App;

Function-based

They are called function-based because they are literally JavaScript functions. Also, these types of components are also referred as stateless or representational components (originally!) because they are best used to only display UI.

import React from 'react';

const App = () => {
    return(
     /* <div>JSX</div> */
    )
}
exports default App;

The example uses a ES6 syntax, but a typical function is also a correct way of creating one. At the end, React is all JavaScript! Ideally, for performance reasons in a React app we should have few stateful components that manipulate state often, and many stateless components that only accept props and show UI.

Also, important to note that a function-based component can also be used as a stateful component. In simple words, Hooks enable the component to access the state by importing and using the useState (check out the resources to learn more).

State and props

Props

Passing data from one component to the other is done through properties or as known in React props. Meaning that, when a custom (not a DOM tag) component is used we can pass data to it by adding custom attributes to it. React passes the attribute to the component as an object where the attribute name is the key and it assigns to it the given value, e.g:

const App = () => {

  return (
    <div> <Person name="Tringa" lastName="Krasniqi"/> </div>
  );

}
//it is actually passed as object
const Person = (props) => {
 /*
   props = {
      name : "Tringa",
     lastName : "Krasniqi"
  }
*/
}

Important to note:

props are READ-ONLY and should never be modified (that's where state comes in!).
all react components should act like pure functions with respect to their props.

State

State allows components to change the output when a user action has taken place, or when we receive recent network data etc., without violating the above-mentioned rule. State properties are private and fully controlled by the component. Therefore, local and encapsulated within the component. When the state is changed in a component React triggers DOM render and updates the value in UI.

To use state correctly means that the following need to be followed:

it should not be modified directly:

//(or this.props.name, if the data is passed)
this.state.name = "Tringa" //incorrect, although correct only when initialised in the constructor

setState({name: "Tringa"}) // correct

state updates might be async, so many setStates will be run in batch and overriding the data. Therefore, use a function within the setState instead of an object, for e.g.:

setState((state, props) => {
  //old state
  //new data (notice, it is props)
})

state updates are merged, so when calling it multiple times it replaces the specified data and merges them to the rest of the properties of the state object. E.g:

this.state = {
   name : "Tringa",
   lastName : "Krasniqi",
   age : 24
}

setState({ name : "Jane" });
setState({ lastName : "Doe" });


/* 
results in:
state = {
   name : "Jane",
   lastName : "Doe",
   age : 24
}
*/

Conditional rendering

It is often needed in our application to show or hide various UI elements based on the state of the application. One common example would be:

when user is logged out, the profile view should redirect to login form
when the user is logged in, it should show the profile view with their info

To achieve this in React we use the JavaScript conditional if statement or ternary operator within the JSX code. Using the if statement example:

render() {
   const button = <LogginButton onClick={this.handleLogin}/>

   if(this.state.isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogout}/>
   } 
   return (
     <div>
         {button}
     </div>

    );
}

The ternary operator is the short form of writing if conditional statements in one line of code, however it is not as readable as its long form. The syntax of this operator is:

condition ? expressionIfTRUE : expressionIfFALSE;

//and it is the same as:

if(condition) {
   expressionIfTRUE;
} else {
   expressionIfFALSE;
}

In our React case it would be used like in the following case:

render() {
   return(
    <div>
    {
      this.state.isLoggedIn ? 
      <LogoutButton onClick={this.handleLogout}/>
      :
      <Logginbutton onClick={this.handleLogin}/>
    }

    </div>
   )
}

Apart from these, what's next?

Resources to learn more form:

React documentation https://reactjs.org/docs/getting-started.html
React course https://www.udemy.com/course/react-the-complete-guide-incl-redux/
Component lifecycle https://www.freecodecamp.org/news/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030/
Beginners guide https://dev.to/aspittel/a-complete-beginners-guide-to-react-2cl6
React Hooks https://reactjs.org/docs/hooks-intro.html | https://reactjs.org/docs/hooks-reference.html

Other important concepts to learn:

Component lifecycle
Styling components
React Hooks

Hope this article will help anyone that is on the same journey of learning React as me.

Any feedback/suggestion/correction will be highly appreciated.

Thank you for reading!

ES6 features you need to learn React

Tringa Krasniqi — Fri, 24 Jan 2020 10:54:28 +0000

Hi DEV community!

In the beginning of 2020 I decided that I will explore React and that I will build at least two projects with it. However, before starting to learn React I discovered that few ES6 features need to be revised and learnt before hand. So, in this post I will share simple explanation of the following features:

let & const
Arrow functions
Classes
Spread & rest operators
Destructuring

This is my very first post, so I hope you find this article useful and you enjoy it. Let's start!!

let & const

Let and const are introduced as new features that serve as a replacement of famous var to declare variables. It is highly recommended to use them in order to avoid accidental mutation of variable values.

let - this should be used to declare a block-scope local variables by optionally initializing it with a value and can be re-assigned to a new value when needed.

There are a few differences between let and var. Let check the major ones:

A let variable is scoped to the immediate block scope and not function body as var is:

function foo() {
     let x = 1;
     {
          let x = 2; //not the same variable
     } 
}

Let does not create a property in the global object, which it will result as undefined in the global perspective

var x = 1; 
let y = 2;

console.log(this.x); // global
console.log(this.y); // undefined

Re-declaring the same variable will result in reference error

let x = 1;
let x = 2; //reference error

Declaring a variable without initializing it will result into a reference error instead of undefined

console.log(x); // reference error
console.log(y); //undefined

let x= 1;
var y= 2;

const - is used to declare a constant block-scope (similar to'let') variables and is necessary to be initialized in the same line where it is declared. Also, a constant cannot be changed through reassignment and cannot be re-declared.

const NAME = "React" //a read-only reference to a value

In React it is typical to declare functions using const, such as functional-based components.

Arrow functions

Essentially arrow functions are an alternative to creating functions and apart from the short syntax, it has some differences compared to the regular form.

The syntax of an arrow function is:

// arrow function
const call = (phoneNumber) => { 
    console.log(phoneNumber)
}

// long form 
function(parameter1, parameter2) {
    return value;
}

//when there is only one parameter, brackets can be omitted
const call = phoneNumber => {
    console.log(phoneNumber);
}

//when only one line return statement, curly brackets and return keyword can be omitted
const call = phoneNumber => phoneNumber;

An arrow function does not have its own binding of this which is considered its main advantage. Also, it does not have binding to super, arguments or new.target keywords which means that they are not suitable as constructors. By the lack of this, the function ends up finding the this from the enclosing scope.

function retryCall(phoneNumber){
   this.counter = 0;

   setInterval(() => {
       this.counter++; // 'this' refers to the retrycall object
   }, 1000);
}

Spread & Rest operator

These two operators have the same syntax, that is "..." (yeap, it's actually three dots) and their naming is based on the context and the way that they are used. So, the spread operator allows to pull out elements of an array, or the properties of an object separately. As an example:

const numbers = [2,4,6];

function findSum(x,y,z) {
   return x + y + z;
}

findSum(...numbers); // that will result into findSum(2, 4, 6);

Whereas, the Rest operator is useful for cloning arrays and objects into a different variable. Since both are reference types, this operator comes in handy to prevent unintentional mutation.

let numbers = [2, 4, 6];

let moreNumbers = [...numbers, 8, 10] // this will result in [2, 4, 6, 8, 10];

Destructuring assignment

This feature allows to easily extract values of array elements or object properties and store them in variables.

//array destructuring
let [a, b] = ['hello', 'world'];
a = 'hello';
b = 'world';

//object destructuring
let {name} = {name : 'john', age: 28};
name = 'john';
age // undefined

This is very useful when working with function arguments. Without using this feature, when one property of an object is needed the whole object needs to be passed in order to have access. However, destructuring allows pulling out only the needed properties which results into a more condensed code. Consider the following:

function getPhoneNumber(addressBookObj) {
   return addressBookObj.phoneNumber;
}

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //return the 223344 phone number value

//using destructuring to access only one property of the object
const getPhoneNumber = ({phoneNumber}) => return phoneNumber; 

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //returns phoneNumber value

Essentially, we get the same result but we save some lines of code by pulling out only the needed property.

I hope you enjoyed this short article and that you'll find it useful to start learning React or any other framework.

Any feedback/suggestion/comment is highly appreciated.
Stay tuned for more posts!

Are Google Developers Certifications worth it?

Tringa Krasniqi — Thu, 23 Jan 2020 12:08:16 +0000

I was checking the Google Developers Certification for the Mobile Web Specialist and I'm wondering whether it is worth taking it, does anyone know?

Thanks ^_^