1Clanek

(Guest writer: Marvin Espino)

If there’s anything that could make a freelancer more marketable, it’s the power and allure of their website portfolios. And among freelancers, there’s none other than designers who feel the need to make their websites more visually appealing.

Because what could be a better way to showcase a designer’s experience than to present their work through beautifully crafted websites? Yes, experience matters — length and depth of expertise in particular. But a website laden with the most interactive features, unique typefaces, and punching imagery can speak better for the designer than experience alone.

So it would not be surprising to find that some portfolios of designers are that beautiful. Simplicity? They don’t know that. Extravagance and elegance? Yes indeed.

Are you looking for inspiration? Browse these portfolios and learn a thing or two about professionally designed websites.

Roby Leonardi

Roby Leonardi is a freelancer based in New York City. His website portfolio is packed with game-design inspiration. Lots of vivid colors and vector graphics embellished the space. It’s also complete with information.

There’s a short bio, as well as his recent projects and contact details. His main website is only an introduction to his actual portfolio, which is well presented through a game experience.

As you scroll, there’s a figure who resembles Roby, and he plays the game while in the background shows his background, hobbies, skills, experiences, and awards.

Yul Moreau

Yul Moreau is a digital art director based in Paris. His website speaks of his ingenuity in UX and UI design.

Upon entering the site, you’ll be greeted with immersive videos in the background. His short bio in white sans serif font is in the foreground.

Scrolling a little bit more and you’ll find well-presented projects in big pictures and short video explainers. Overall, his website is a carefully curated experience.

Robin Mastromarino

Robin Mastromarino is an interactive designer from Paris. His works vary in style. Some are high-quality photos. Others are vector and 3d images. Images are big and take up the whole space, and Robin did a great job curating them in beautiful slides.

There’s no doubt why the website has been a winning favorite from the award-recognizing website “awwward.”

Ben Mingo

Ben Mingo has worked with big brands like Nokia. He’s a freelance designer from Southern California, and he also operates under a design studio called Basic.

But his website is far from basic. It’s unique and interactive — the mouse cursor blends with the website design, where the dominating color is black and white. Projects are well-curated with lots of sample pictures. So visitors and potential clients will have fun navigating through the site.

Kuon Yagi

Kuon Yagi is a Japanese freelance web designer and mark-up engineer. His portfolio includes big, bold white letters and shades of red.

Kuon did not just typically display the pictures, but they come and go every time you scroll through, providing an animated experience.

Julie Bonnemoy

Julie is a freelance graphic designer living in Amsterdam, Netherlands. Her website boasts several projects which showcase her design ability.

But more importantly, the website design itself is visually arresting. The front page boasts animated pink bubbles dancing in the background. The colors have fade-in fade-out effects. And whenever you point the cursor to the images, it produces a rippling effect.

Étienne Godiard

The concept on Etienne Godiard’s website is simple, but the size and vividness of the picture and the fonts are what make the portfolio alluring enough.

Etienne is a visual designer based in Paris, and she specializes in technology brands. The website is laden with different colors covering the whole page. It changes depending on the project it showcases, and each project shows embossed pictures of her work samples.

Koco

KOCO is short for Kochenburger Company. Michael Kochenburger is a freelance product designer. He has an extensive work project

Black is not the usual color for a website, but KOCO nailed this unusual display. The texts and pictures are clear despite the black background. And the best part is how clean the arrangement of all his design projects makes the website so easy to navigate.

Dot Lung

Dot Lung is a social media expert. Her website is one of a kind due to the contrasting colors of purple and neon orange.

It’s not funny to look at. In fact, the difference in colors is a wow factor. Plus, the 3d shapes and images of her favorite figure, unicorn, are well placed along with the site, creating an otherworldly experience.

Sofia Papadopoulou

Sofia Papadopoulou is a visual designer and an art director. Black is the theme of her portfolio. But what makes it uniquely good is the use of shades and light. The mouse cursor acts as a flashlight that helps shine the words brighter. Plus, in the background sits an abstract moving black or white figure. There’s no doubt why this portfolio hoards website awards since 2017.

Final Thoughts

Ready to take on the challenge of making your portfolio unique? But to make your brand stand out, you must carefully consider which elements go in and which should be left out. Meaning, all content is well-curated for future clients to have a seamless viewing experience.

First, you need to integrate your personality. Your name, logo, slogan, or even colors must reflect your personality and your services. You can design a logo through logo makers for a small amount. And some of the branding designs can be crafted in free services like Canva, Visme, and Adobe. It’s where you can choose slogans and colors to your liking.

Afterward, consider placing only the most important, relevant, and the best projects — the ones that stand out. Because a portfolio is not a detailed history of your professional work, it only acts as an attractive pedestal to lure clients.

Over to you, write in the comments things you consider for your website. Do these portfolio samples inspire you? Or what factors did not sit right with your design taste? Share in the comments.

(This guest post is written by Marvin Espino for Hongkiat.com. Marvin has been writing since high school. A background in journalism marked a career in reporting and freelance writing. He has written several articles on marketing, technology, and small businesses on BrandCrowd (brandcrowd.com). Outside work, Marvin reads a lot and hoards well-written pieces for inspiration. And he sings and bakes goodies too.)

The post Showcase of 10 Talented Freelance Designers (And Their Portfolios) appeared first on Hongkiat.

As a web developer, there’s always something you can learn every day and grow. You can learn design principles, user experience, user interface design, and user behaviors through analytics data. Or, you can branch yourself into servers such as installing and running a server package yourself.

In this round of the series, we’ve put together different resources from tools, podcasts, articles, and a lot more where you can learn multiple disciplines beyond just creating the website itself. Let’s get started!

UI Glass Generator

Glassy user-interface is making a comeback. We can see it now is an integral part of the new interface design in Windows, and macOS. Thanks to the latest CSS feature, we can also adopt a similar interface for the website, and this tool will make it even easier and quicker to create one.

You can use the GUI to adjust the color, opacity, and background of your website and it will generate the CSS that you can copy and paste.

VS Code Fortnite Theme

A Fortnite-inspired theme for Visual Studio Code. It comes with some special effects by enabling the Fortnite: Enable Legendary option. If you enjoy the game and the flares while coding, this VSCode theme is for you.

MakerStations

This site collects desk setups from various professionals (designers, developers, writers, etc.). Not only that it presents these for inspiration but also dig into the owner’s personalities and reasons behind the setup.

If you’re currently looking inpiration for your new desk setup, look no further. You’ll surely find some good ones in MakerStations.

React.js ARIA

A collection of React.js functions that helps in creating accessible UI components and design systems for your web application.

It’s designed to deliver the best possible interactive experience for users whether they’re using a keyboard, mouse, or assistive device. It’s a great initiative from Adobe for a better web.

React Hooks Testing Library

Hooks is a concept in React.js for creating components less rigid and we can create custom Hooks aside from the ones provided built-in.

Now if you have come across a situation where you’d like to perform an automated test for the custom Hook, this library will come in handy. It provides the pattern to test your custom React.js Hook as close as when it’s used within a real component.

WiFi Card

This tool makes sharing WiFi credentials more convenient using QR code. You simply need to enter the WiFi name and the password. Print and attach it somewhere in the room.

Umami

Umami is an open-source application to collect analytic data. It’s easy to install in your own server or VPS with minimum requirements. You only need Node.js and MySQL (or PostgreSQL). It’s a great application if you’re looking for an alternative to Google Analytics where you own and control all the data.

The CSS Podcast

Run by Google Developer Advocates duo, Una Kravets and Adam Argyle, you will learn so much about CSS; from practical tips, accessibility, performance, and much more. It’s one of the best quality sources to learn CSS and web development in general.

Fosscard

Discord is rising as an interactive communication tool for communities. You can join various groups including groups for web development and programming, to chat with the community or make a voice or video call.

Discord is a SaaS though. If you’re looking for a self-host where you can have more control, Fosscard can be a good alternative.

Clean Code PHP

A collection of advice to write PHP codes that are readable, reusable, and most importantly maintainable. It’s a great resource where you can learn some pracatical tips; such as how to best name variables, how to structure conditional block, and how to name a function and the arguments, to name a few.

MiniCLI

A tiny PHP library to build Command Line Interface (CLI). It provides the base structure to register your custom command lines as well as the helper and utility functions to handle user input and the output. A great starting for creating a PHP-based command line.

UniformCSS

A generator and utility-first CSS framework built with Sass. It’s a mix of the good of both worlds in which you can leverage the flexibility of utility-first workflow while still have the power of Sass such as the variables, mixins, and functions.

Layout Generator

An online tool to generates a base layout for your website. It utilizes Grid for the layout and provides GUI to generate the layout. For example, you can set the number of columns, rows, and alignments. I find it’s a more intuitive way to generate a layout with CSS Grid.

Fower

Utility-first CSS methodology is getting quite popular. It offers flexibility to be scaleable on small or large websites. If you’re into writing CSS-in-JS for your web application and lean-to a utility-first CSS approach to compose the styles, you might be interested in trying this library.

Fower is framework-agnostic so you can apply it in various frameworks such as React.js, Vue.js, and Svelt, or plain JavaScript.

RTL WTF

A great source to learn tips, use cases, and best practices to build a website for the right-to-left writing direction such as Arabic and Hebrew. This website should be on your bookmark.

Notistack

A React.js library that makes it easy to display “toast” notifications on your web app. It’s highly configurable that allows you to present the best possible user experience.

To name a few, you can set the number of maximum notifications, prevent duplicates by not showing notifications with the same message, and set the type of transition.

Kopio

An open-source server application that you can use to run and manage backups in your own cloud servers. Kopia also provides a nice desktop application that runs on Windows, macOS, and Linux where you can manage it conveniently such as to create a snapshot and restore the snapshot.

Web Components DevTools

Web Component allows you to create a custom component that the browser can understand and render. If you’ve come across to require build custom Web Component, you will be needing this Chrome extension that allows you to debug the Web Component on the browser.

Fluid Typography

A handy little tool to create text size that scales with the window size. The tool helps you generate the style that allows the text on your website to look great and proportional on any screen.

MillionJS

A tiny JavaScript library (less than 1KB) to create an interactive user interface for your website. It implements Virtual DOM behind the scene and some unique approaches that make it fast to render on the browser.

I think it can be a good alternative to some more established frameworks like React.js and Vue.js, especially if you just need to just the bare of Virtual DOM.

The post Fresh Resources for Web Designers and Developers (July 2021) appeared first on Hongkiat.

Today is the world of inclusive technology – websites, apps, and tech gadgets that are made for people with different kinds of abilities and inabilities. So when you’re designing a website, you include features that make your design accessible to as many people as possible. And this is where accessibility tools come into play.

Instead of creating everything from scratch, here’s a list of cool accessibility tools for designers. From creating color combinations according to WCAG standards to adding different reading modes to your website, these tools are a must-haves for every designer. Take a look at the list to know about each tool in detail.

1. Stark

Stark a feature-filled accessibility tool that helps web and mobile designers to add accessibility features into their UI designs to make their designs work for everyone. Either you are designing a product from scratch or updating your existing design system, it gives you a hassle-free way to create accessible products at any level.

One of the best things about this tool is that it integrates seamlessly with Figma, Sketch, Adobe XD, and Google Chrome and readers support all through the product lifecycle. Some of the accessibility features that the tool can add to your design are contract checker, colorblind generator, rapid contrast checking, and many more.

• Supports: Figma, Adobe XD, Sketch
• Stark Price: Free
• Premium app/subscriptions? Yes (Check pricing)

2. ColorSafe

To make your website accessible for users with different visual capabilities, ColorSafe offers a bunch of features that are very easy to integrate in your design. It enables you to create visually beautiful and functionally accessible color palettes as well as text and background contrast ratios based on WCAG guidelines.

The working of this tool is pretty simple. All you have to do is enter a background color and determine the styling of your text and ColorSafe will do the rest. Once you decide the text-to background contrast ratio, you can apply it in your design and test the results.

• Supports: Browser
• ColorSafe Price: Free
• Premium app/subscriptions? No

3. Contrast

Just as the name says, Contrast is an accessibility tool that takes the manual labour out of color contrast ratio testing and does it quickly and automatically. Created by two professional designers who knew how badly such a tool was needed from the aspect of usability and aesthetics.

Being a user-friendly tool, the tool gives you precise color contrast information (contrast score) according to the WCGA standards and updates the entire app in a jiffy. At the time of writing, however, it is available for macOS only.

• Supports: macOS
• Contrast Price: $6.99
• Premium app/subscriptions? Yes

4. Color Review

Color Review is a simple web-based tool that helps you in making an informed decision about which colors and color combinations to use in your UI design, especially when it comes to creating a design for people who perceive colors differently than others.

Built on the basis of WCAG standards of visual design, the tool tool works on two levels I.e., AA and the more strict one AAA. There’s also a Color Review app available for OS X, Windows, iPhone, and Android with interesting features like swatches and eyedrops and and requires you to sign up to get it.

• Supports: Browser
• Color Review Price: Free
• Premium app/subscriptions? No

5. Colorable

Colorable is a web-based color combination contrast tester that enables you to decide upon the most suitable background to text contrast ratio for your website or mobile app’s interface design. With a pass/ fail score based on WCAG accessibility guidelines, you are able to make your UI universally accessible for users – especially those with visual impairments.

With this tool you can take a set color palette and instantly get contrast values different types of combinations. To use it just enter an array of color strings or an object with color strings as values and it will return a list of color combinations for these colors along with their WCAG contrast values.

• Supports: Browser
• Colorable Price: Free
• Premium app/subscriptions? No

6. The A11y Project

Offering a beautiful, accessible and inclusive digital experience, the A11y Project upholds the value of providing equal opportunities when it comes to design and tech. It helps you in developing completely accessible products by the dint of an array of wonderful resources like backgrounds, icons, color palettes, and helpful guides.

The best thing about this tool is that it is created and constantly updated by a community of talented individuals. Moreover, there’s an option to help you conduct an accessibility audit through a comprehensive checklist according to the accessibility guidelines.

• Supports: Browser
• The A11y Project Price: Free
• Premium app/subscriptions? No

7. Contrast Grid

When you’re working on a huge web or mobile app design project, you have a many choices to make in terms of color combinations. Contrast Grid is a tool that enables you to test a number of foreground and background color combinations.

The web-based tool has a simple interface in which you can manually enter different colors that you want to use as rows and columns and it will create a grid that is compliant with WCAG 2.) minimum contrast requirements. You can then copy the grid code for HTML or CSS and even share your grid on Twitter.

• Supports: Browser
• Contrast Grid Price: Free
• Premium app/subscriptions? No

8. Clrs.cc

Clrs.cc is a sort of library or repository of different color combinations that give you a good dose of inspiration for creating accessible user interface for color blind or visually challenged individuals. From light to dark background, you’ll find many interesting options of color combos.

There are total of 90 color combinations on the site along with their respective contrast values as well as AA or AAA values. You can choose any of these background to text ratios or simply mix and match to create one of your own.

• Supports: Browser
• Clrs.cc Price: Free
• Premium app/subscriptions? No

9. Who Can Use

Who Can Use is an interesting tool that helps web and graphic designers understand how different color combinations and color contrasts affect people with different visual disabilities. Using plugins like Chroma.js and Color-blind, it helps in making your designs inclusive for everyone.

Keeping the recommendations of WCAG in consideration, this intuitive tool features a background color picker with slider and tells you the contrast ratio and WCAG grading of each color. Moreover, with each color you get to see how this color will be seen by people of different vision types along with a simulation run.

• Supports: Browser
• Who Can Use Price: Free
• Premium app/subscriptions? No

10. ColorBox

Colorbox is a simple tool that enables you to create color combinations for accessible UIs that make your website usable for visually challenged users. You can either one color and many colors and manually adding hue, saturation, and brightness values.

The tool also allows you to import color codes to get the appropriate color combination options, an option to export the selected color information as color codes that you can integrate in your web design as well as sharing the URL of the color information that you select.

• Supports: Browser
• ColorBox Price: Free
• Premium app/subscriptions? No

The post 10 Best Accessibility Tools For Designers appeared first on Hongkiat.

If you are a designer or a developer, you’d probably know that trying to make your project perfect can extend the time needed to complete the project-even several times. There’s always that one last element you want to improve quickly before sending it. But in my opinion Perfection is equal to fascism.

That’s a bold statement, I know. But look around you. Is there at least one defective item in your house or garage?

Your car? You need to refuel it and once in a while, it breaks down-not perfect. Your computer? Breaks down, and crashes, and the hard drive dies before you can manage to back up your data-not perfect. Bread? It goes stale too soon-not perfect. Glasses? Glass is vulnerable-far from perfect. So what’s the conclusion?

Perfection harms development

Nothing that surrounds us is perfect. There’s always at least one thing that can be improved. If everyone leads their product to perfection before launching it to the public, then today we would have nothing! Not even electricity or wheel.

Since everything surrounding you is not perfect, would you rather not own them? Would you rather wait until someone leads them to perfection before they let you have them? Probably not.

Therefore while working on your projects, always takes other’s failures as a reference – be creative, but don’t try to be perfect.

Why is perfection harmful?

Because it doesn’t favor achieving goals when starting the work, you always have some actual goals to reach with the design. It can be something as apparent as increasing sales or unusual ones like creating some awareness for your aquatic kickboxing training center.

Nevertheless, those should be the goals you need to focus on, and every time you want to do something new, you should ask yourself the question: “does this thing bring me closer to the goals?”

And now the funny part. The pursuit of perfection does not bring you closer to the goals. On the other hand – coming up with the simplest possible solution does. That’s right – most straightforward and reliable, not the best. In one of the early stages of the project, you can’t be 100% sure which solution will be the best one.

Because how would you know this when you haven’t even launched it? Only the feedback from the market (the real users) can give you genuine ideas for possible improvements to your website and its usability. That feedback is the improvement you need to focus on. not what you’ve thought would be the best for them.

This is the blatant truth (unfortunately). You’ll never know what people want or need, so working on some complex solution, which can end up not being needed, is a waste of time. That’s why you need to start with the solution that makes it possible to achieve the goals in the simplest possible way. And one more thing you should know:

Perfection very often remains unnoticed.

Unfortunately, all this extra time you’ve spent pursuing perfection can remain unnoticed and unappreciated. There’s a reason why the recipient of your project might not even notice your extra effort.

And that is simply because they didn’t see the previous version of the project, so they don’t have anything to refer to and compare to. The only thing they’ll notice and criticize will be basic functions and elements.

Working on details (tiny fragments of your graphic design) robs most of your time. That one little thing that keeps agitating you or some additional function you think would be cool and handy.

So, before you realize it, the total project completion time has extended several times. Do you want to spend 60% of your work time perfecting the details and only 40% on achieving the goals?

If you’re freelancing, you can be sure that every client will be 100 times more grateful for a simple, easy to use and understandable project focused on achieving goals than a beautiful work of art, which looks great but doesn’t put any extra money in their pocket.

Abandoning perfection is far from abandoning a good project.

As I’ve said before, during the creation phase of the project/product/design, you can’t be sure what will the perfect solution really be, so the whole idea of pursuing it is doomed from the get-go.

When you’re working on something, then the only way you can judge perfection is by your own subjective motives-One man’s meat is another man’s poison.

The most important rule of designing: You are not your client or visitor. That’s why you can’t judge the thing you’re designing only according to your own opinions and assumptions.

You will create a much better website by not being perfect.

It’s simple (and true). If you did not try to make every detail perfect and focus on the most important key elements instead, these key elements will not only be clearly visible in the final solution, but you will also finish the work earlier.

So by hiding perfection in the pocket, you’ll be much more productive and deliver much better results.

Here are the benefits that can be brought by forgetting about perfection and creating a simple version of the website instead:

1. The website can be launched earlier.
2. The website can make money / get exposure earlier.
3. The feedback from visitors will arrive earlier.
4. Because of the early feedback, you will improve the website by focusing on the things the visitors pointed out (not only the things you thought would be cool).

The most important conclusion here is (even though it sounds kind of strange) that a simple solution is better than a perfect solution. “Ok, but how to implement this approach?”

Divide your tasks into two groups: “Important ones” & “Details.”

The important ones are important such as achieving goals and objectives, building the basic functions, etc.), and the details are just, well, just details.

Details consume a massive amount of time. That’s why you need to skip them and get back to them later, during one of the next phases of the work (or don’t get back to them at all). So what do I mean by “later”? When is the best time to get back to details?

Work iteratively

Here’s what I mean, just bear with me – When you finish dividing the tasks into two groups, then in the first iteration, you should try to focus only on the important ones and try to complete them in the easiest possible way. At the end of this iteration, you will have a finished website ready to be launched (SCRUM-like approach). You can start another one if you want to.

In this iteration, you can try to improve the previous version. (You will get the ideas for improvement from the feedback from your clients/visitors.) After the second iteration, you will have an improved version of the website.

If you want to continue the work and constantly improve the website, you can start the third iteration and then the next ones. This is the right moment for getting back to the things you’ve classified as “details” at the beginning of the work, but you might as well realize that these “details” are completely redundant judging by the reaction of the visitors/clients (a very common thing).

This is a real strength of the iterative approach. During each step of the work, you have a complete website ready to be launched, and you can improve it constantly. This is a much better situation to be in compared to working on something in a closed room for ten years, trying to make it perfect without any feedback from the world.

The iterative approach is much safer as well. What is a better scenario – Realizing that your idea is a piece of you-know-what and there is no demand on the market after a month of work, or realizing it after ten years of work?

Just a side note: Due to this approach, I was able to complete my Master’s Degree paper a couple of months before my colleagues did. What I did was focus on the most important thing about each chapter, got it done as soon as possible, and left all the details for later.

If I had wanted to make each perfect chapter right from the beginning, then probably I wouldn’t have finished it until today. Also, it has been over two years now since I’ve defended my M.Sc.

Work quickly and effectively.

This is an all-purpose tip, and it can be put into practice while working on a project for your client as well as while working on your own website. These are the only things that matter now: quick work and fast results. It’s about time to adapt.

Always try to deliver fast results (focus on achieving goals) by providing the simplest possible solution, not the “perfect” solution by your own subjective opinion. Remember – you don’t need to be perfect. “Good enough” is good enough.

One more thing – What are your experiences with projects at which you’ve tried to deliver a perfect solution?

The post Perfection in Design: Why It’s a Bad Idea appeared first on Hongkiat.

Did you miss our previous article…
https://www.1clanek.info/?p=673

A high bounce rate is frequently caused by the poor visual accessibility of a website. When fonts are too small, or they are hardly legible, when there are too many distractions or not enough whitespace, many people just leave the site without a second thought.

One of the most frequent reasons for early abandonment is the poorly selected colour schemes that decrease the readability of the content.

According to the statistics of WHO, there are about 285 million visually impaired people around the world, many of whom are partially or fully colour blind.

Visual disabled people see colours differently, so avoiding low colour contrast in our designs is inevitable if we want to provide our customers with an accessible and user-friendly website.

Web Standards For Colour Contrast

Colour contrast ratio measures the difference in contrast between two colours. The higher the value is, the easier it is to distinguish the object (text, image, graphic) in the foreground from the background.

Colours can contrast in many different ways, such as in hue, value and saturation. Colour contrast ratio is calculated by a formula provided by W3C, the main international standards organization for the World Wide Web.

It can take a value between 1:1 (no contrast at all, the foreground and the background have the same colour) and 21:1 (the maximum contrast that only exists between black and white).

W3C’s lastest Web Content Accessibility Guidelines (WCAG) 2.0 provides web developers and content creators with benchmarks for the minimum (Level AA) and the enhanced (Level AAA) value of acceptable colour contrast ratio.

Level AA requires at least 4.5:1 ratio for regular text, and 3:1 for large text. It’s much easier to read large text like subtitles, that’s why it needs a lower colour contrast.

If you want to reach Level AAA which is the enhanced level, you need to design your colour scheme with a greater care, as it requires at least 7:1 contrast ratio for normal text, and 4.5:1 for large. If a text is part of a logo or a brand name, there’s no minimum colour contrast requirement at either WCAG level.

We can only call a website visually accessible if the colour contrast ratio between every foreground object and its background reaches at least Level AA.

Benefits of High Colour Contrast Ratio

By ensuring better readability you don’t only engage visually impaired users, but also people who read your content on small screens such as on a smartphone or a smartwatch, among bad lighting conditions, and on lower quality monitors.

People also read faster when there’s higher contrast between the text and the background, so it will most likely take more time for them to get bored with the content of the site.

If you worry that applying higher contrast ratio will have a negative impact on the aesthetics of your design, you need to check out the Contrast Rebellion web project which proves, with real-life examples, that sticking to the high contrast ratio rules can still result in attractive and cool designs.

Apps For Checking Colour Contrast

There are many great free tools all over the web that can help designers check the colour contrast ratio of their website.

The easiest way of testing your design for colour contrast is to pick the main colours with either Photoshop or a suitable browser extension like this one for Firefox, and copy the values into one of the apps below.

The most important thing to remember is that you always need to compare the foreground colour such as text colour to its surrounding area (background colour).

1. WebAim Colour Contrast Checker

WebAim (Web Accessibility In Mind) is an organization promoting web accessibility that offers developers a simple but reliable colour contrast checker among many other great accessibility tools such as Wave, a general accessibility evaluation app that can help you quickly assess your site’s accessibility issues.

WebAim’s Colour Contrast Checker tells you if your colours pass the WCAG AA and AAA tests, both for normal and large texts.

2. Snook Colour Contrast Check

Jonathan Snook, currently working as lead front-end developer at Shopify, has been hosting his handy colour contrast check tool for over a decade. Snook’s app allows you to change the HSL and RGB values of the foreground and background colour one by one by using convenient range sliders until you reach a result that is compliant with the WCAG 2.0 benchmarks.

CheckMyColours

CheckMyColours created by Giovanni Scala allows you to check the colour contrast ratio of all foreground-background colour combinations on a live website.

It calculates luminosity contrast ratio, brightness difference, and colour difference, and provides you with a full report about the results. CheckMyColours’ report can significantly facilitate your understanding of how you can improve the visual accessibility of your site.

Color Scheme Designer

Color Scheme Designer is not particularly a colour contrast checker, but a tool for designing complete colour schemes.

We include it in this collection, because it has a feature that allows you to see how your colour scheme is perceived by people with different types of visual disabilities.

You can test your colours for full colour blindness, protanopy, deuteranopy, and many other visual impairments. The app has a newer version called Paletton that makes even a more sophisticated vision simulation possible (you can also test for things like lousy LED display or weak CRT display).

W3C also provides you with a huge Web Accessibility Evaluation Tools List where you can find many other colour contrast tools such as this helpful Accessibility Color Wheel.

Tips For Creating Visually Accessible Websites

If you want to create a visually accessible website, it’s always a good idea to avoid using colour alone to convey functionality or meaning. Icons that change their colour based on their current state are typical examples for this.

If it’s possible, always design additional visual cues that assist people who see colours differently in understanding functionality.

Never forget to pay extra attention to the colour contrast of buttons, links and menus, as they are the means of navigation on your site. If users can’t navigate easily on your site, you’ll quickly lose them. Accessible colours for call-to-action buttons are also crucial for good conversion rates.

It’s a good workflow practice to test colour contrast ratio as early as possible in the design process as it will be hard to persuade your client to change the colour scheme of the site later on down the design process.

Now Read:
Practical Approach To Choosing Website Color Scheme

The post Using High Colour Contrast For More Accessible Design appeared first on Hongkiat.

Did you miss our previous article…
https://www.1clanek.info/?p=597