If you’re a #WordPress developer, you’ve probably heard of WP-CLI, the command-line interface for WordPress. But what exactly is it? And why should you care? And did you know you can also use it locally?

WP-CLI is a tool that allows you to manage your WordPress sites from the command line. This means you can perform tasks like creating and updating posts, managing plugins and themes, and even backing up your site, all without having to log in to your dashboard.

So, why should you use WP-CLI?

It’s faster. It’s often faster than using the WordPress dashboard, especially for tasks that you repeat often.

It’s more powerful. It can do things that you can’t do with the dashboard, like managing your site’s .htaccess file or running scripts.

It’s more flexible. It can be used to automate tasks and integrate with other tools, making it a powerful tool for developers.

I recently started freelancing on a WordPress project and decided to try it out. Since I prefer to run WordPress locally on my machine and because my Mac is still kicking at 10+ years old, I went old school and used #MAMP. (Docker doesn’t work on older machines 😫).

I wanted to try running a search and replace on the imported database locally to find all instances of the staging url and replace it with my localhost url. Normally, I would use Migrate DB Pro, which handles this automatically but wanted to try a different method. WordPress plugins? Don’t know her. 😁

After installing, I navigated to the root level of my WP install, the same level as my wp-config file. I ran “wp option get siteurl” to test the correct url was getting returned and I got an error.

After reading through the WP-CLI docs, #StackOverflow, and general Googling, I found out that in your wp-config file, you need to add the port number to your database hostname.

Once that was done, I ran “wp search-replace ‘staging-url’ ‘localhost url'” and it worked like a charm. If you want, you can even target the search and replace to specific tables.

There are a ton of commands available, so it’s recommended to learn the basics before you can use it effectively.

There are a few great resources available for learning WP-CLI:

The official WP-CLI documentation: https://make.wordpress.org/cli/

The WP-CLI Cookbook: https://github.com/wp-cli/wp-cli

The WP-CLI Community: https://wordpress.slack.com/messages/C02RP4T41

WP-CLI is a powerful tool that can make life much easier. If you’re not already using it, I highly recommend that you give it a try!

You take The Emotion’s 1977 disco track “Best of My Love,” add a modern hip-hop twist, rap lyrics and you get Paul Russell’s viral banger “Lil Boo Thang.”

Take Grandmaster Flash & The Furious Five’s 1982 hit “The Message,” give it a 2023 Gen-Z spin sprinkled with synths, and you get Coi Leray’s feminist anthem “Players.”

The modernization of vintage art could be applied to just about anything. What immediately comes to mind is a new UI/UX design trend that’s taken the internet by storm, Neubrutalism. Seriously, it’s bigger than cats used to be (Cat videos on YouTube, not the musical).

Neubrutalism, or Neobrutalism, is a modern interpretation of Brutalism, an architectural style that gained popularity mid century, characterized by minimalist, plain, large-scale, rectangular shapes with an almost unfinished quality and lack of decoration or flourishes.

Neubrutalism on the web is striking and easily recognized. It feels modern and vintage at the same time. The user experience is flat with no gradients, using basic shapes, and often clashing colors.

Figma, Gumroad, and even Mozilla adopted this design movement. Even the fonts are similar. Look up the design trend on Dribbble and you will find rows and rows of mocks and graphics.

But instead of minimalist, these designs seem to go in the opposite direction, maximalist. A lot of animations, albeit subtle at times, a lot of large elements with a lot of loud colors that may not necessarily offer enough contrast in all instances. Fast moving news ticker banners are a commonly used element.

So this begs the question…is this ever growing design trend accessible?

As someone who identifies as neurospicy, I can only take Neubrutalism in small doses. At first, I thought these designs were novel and engaging. Five minutes later, I felt a migraine coming on. (I’m looking at you, Disco Conf)

I think the internet deserves better. Don’t you?

Your Secret Weapon for Achieving WCAG Superhero Status

Web accessibility is all about ensuring equal access to information on the web for individuals with disabilities. WCAG (Web Content Accessibility Guidelines) standards play a crucial role in achieving this by providing guidelines for designing and maintaining accessible websites. Here, we’ll zero in on one major aspect of accessibility when it comes to high fidelity designs, color contrast.

Color contrast refers to the difference in hue, saturation, or luminance^[1] between two elements, such as text and its background. It provides visual clarity and legibility, allowing people with various degrees of low vision, color blindness, or other visual impairments to perceive and comprehend information effectively. As it’s an often overlooked aspect of web design, it’s important to keep this in mind when declaring your primary, secondary, and tertiary colors in your style guide.

Enter color contrast checkers, the unsung heroes of WCAG compliance. These neat little tools have the power to ensure that everyone can access and navigate websites with ease. In this action-packed article, we’ll unveil the hidden secrets of color contrast checkers and show you how to become an accessibility champion!

Before our tools swoop in for the rescue, let’s add in a little context in understanding WCAG Color Contrast Guidelines. The requirements are categorized into three levels: Level A, Level AA, and Level AAA. Level AA is considered the standard for most websites and is widely adopted to meet basic accessibility standards. However, when you suit up with Level AAA, you’ll gain a higher level of accessibility, which is recommended for situations where maximum accessibility is desired. The two most common WCAG success criteria related to color contrast are 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast.

The WCAG success criterion (1.4.3) focuses on the minimum contrast ratio between text and its background. It sets a standard for ensuring that text content maintains sufficient contrast with the background color to be easily readable. The contrast ratio is calculated based on the relative luminance of the foreground (ie: text) and background colors. The minimum contrast ratio required for Level AA compliance is 4.5:1 for normal text and 3:1 for large text (typically above 18pt or 14pt, if bolded).

WCAG success criterion (1.4.11) addresses the contrast between non-text elements, such as icons, graphical symbols, or user interface components, and their background. Non-text elements often serve important functional or navigational purposes, and sufficient contrast is necessary to make them discernible and understandable. This criterion ensures that non-text elements have a contrast ratio of at least 3:1 with their adjacent background. However, there are exceptions for decorative graphics that don’t convey information or don’t receive user input.

Now back to our regularly scheduled programming. Color contrast tools will fly in with instant contrast calculation, provide pass/fail indicators based on the WCAG requirements, and offer recommendations for improving color contrast with alternatives. Some color contrast checkers simulate the experience of individuals with various visual impairments, such as color blindness or low vision. Using color contrast tools in the design phase will save tons of time during the development and QA phase of your project before discovering that your primary and secondary colors don’t meet the minimum requirement. This means development presses on but your declared colors are going back to the design drawing board and this could ultimately slam the breaks on your project.

There are a multitude of contrast checkers online. Here’s my personal top 5 (in no particular order):

WebAIM’s Contrast Checker

WebAIM’s Contrast Checker is a bit of a gold standard but isn’t winning the key to the city due to its early aughts design. That being said, it gets the job done and it gets it done well. It allows users to input specific foreground and background colors and provides instant feedback on the contrast ratio. The results are displayed with clear pass/fail indicators based on WCAG color contrast requirements.

Stark

Stark (no relation to Tony) is a popular design accessibility plugin that includes a color contrast checker among its features. It integrates with design software like Sketch, Adobe XD, and Figma, allowing designers to check color contrast directly within their design workflows. It’s also available as a Chrome extension. Stark provides real-time feedback on contrast ratios and compliance with accessibility standards. While it does offer suggestions for improving color contrast, this is a feature of the Pro version, which is $10 a month.

Eightshapes Contrast Grid

This color contrast grid is fire and a favorite on this list! 🔥 It can be a little intimidating at first but it’s actually super helpful. A major pro of this checker is because it’s a grid, you can test multiple colors at a time and each column and row intersection will provide a fail or level of accessibility indicator. You can test all your brand colors in one go! In the text box on the left side of the grid, you can change color hex values and names and they’ll appear in the grid.

Colorable

Colorable’s color contrast app will show you the contrast ratio value and accessibility level in real time as you slide the hue, saturation, and lightness ranges. This app features a reverse button that swaps out the background and text color and a randomizer button that will give you a random text and background color pair.

Coolors

Coolors’ Contrast checker is similar in functionality to Colorable with some super charged features. It offers a color picker you can use to pick any color from the page and gives a breakdown for both small and large text. Down side, it doesn’t show the accessibility level. Up side, Coolors will generate a fun, inspiring quote to illustrate what block text will look like with your chosen colors.

Power up with each of these and see which one suits your needs best. Think of different use cases and scenarios when testing for contrast. Boost your site for accessibility by covering all cases and various factors such as text size, background images, dynamic content, and error states. For example, make sure your text is readable and of the proper contrast when you have display text over an image, especially an image with a wide range of color variants.

To keep your accessibility skills razor sharp, it’s essential to stay on top of updates to the WCAG guidelines. The best resources for this is the Web Accessibility Initiative (WAI) and the WCAG official documentation. Be sure to revisit your contrast checker of choice to ensure continued compliance with evolving WCAG requirements.

By prioritizing accessibility and adhering to WCAG standards, we can build websites that are inclusive, user-friendly, and empower everyone to fully engage with the digital world.

Footnotes:
[1] Want to better understand the difference hue, saturation, and luminosity? This post by Amit Agarwal (@labnol) has the best explanation I’ve ever seen with a video by Bruce Gabrielle (@speakingppt)