Contrast Checker

Contrast Checker

Script for Adobe Illustrator

✦ Available exclusively on Patreon for Pro supporters.

ㅤ

Description

Contrast Checker is a powerful Adobe Illustrator script that helps designers ensure their color combinations meet WCAG (Web Content Accessibility Guidelines) accessibility standards. The tool provides real-time contrast ratio calculations and allows you to adjust colors interactively to achieve the desired accessibility compliance.

ㅤ

Key Features

  • WCAG Compliance Testing: Instantly check if your color combinations meet AA and AAA standards for normal text, large text, and graphics
  • Real-time Contrast Calculation: See contrast ratios update live as you adjust colors
  • Dual Color Space Support: Work with both HSB and RGB color models via tabbed interface
  • Interactive Color Adjustment: Use sliders, numeric inputs, hex codes, or the native color picker
  • Automatic Color Correction: Set a target contrast ratio and let the script adjust colors automatically
  • Live Preview: See changes applied to your selected objects in real-time
  • Swatch Integration: Optionally add your final colors to the document swatches panel
  • Reset Functionality: Quickly revert to original colors

ㅤ

Installation

1. Download the Contrast Checker.jsx script file.

2. Place the script in your Adobe Illustrator Scripts folder:

⮑ Mac: /Applications/Adobe Illustrator <Version>/Presets/<Language>/Scripts

⮑ Windows: C:\Program Files\Adobe\Adobe Illustrator <Version>\Presets\<Language>\Scripts

3. Restart Adobe Illustrator if it's already running.

4. Alternatively, run it directly via File > Scripts > Other Script... and browse to the file location; or just drag and drop the .jsx file onto your Illustrator document window.

ㅤ

Running the Script

Option 1: With Selected Objects (Recommended)

  1. Select two objects in your Illustrator document
  2. First selection: Foreground color (e.g., text color)
  3. Second selection: Background color
  4. Both objects must have solid fill colors
  5. Run the script via File > Scripts > Contrast Checker
  6. The dialog will open with your selected colors loaded

ㅤ

Option 2: Without Selection

  1. Run the script without any selection
  2. The dialog opens with default colors (white background, black foreground)
  3. Adjust colors as needed using the controls

ㅤ

Using the Script

The Contrast Checker dialog is organized into several sections:

ㅤ
ㅤ

image gallery

ㅤ

➊ Color Preview Panel

  • Left half: Background color preview (click to open color picker)
  • Right half: Foreground color preview (click to open color picker)

➋ Background Panel

  • Hex Input: Enter or view hex color codes (e.g., FFFFFF)
  • Reset Button: Revert to the original background color
  • HSB Tab: Adjust Hue (0-360°), Saturation (0-100%), Brightness (0-100%)
  • RGB Tab: Adjust Red, Green, Blue values (0-255)

➌ Foreground Panel

  • Hex Input: Enter or view hex color codes
  • Reset Button: Revert to the original foreground color
  • HSB Tab: Adjust Hue, Saturation, Brightness
  • RGB Tab: Adjust Red, Green, Blue values

➍ WCAG Results Panel

The script evaluates your color combinations against these accessibility criteria:

  • Normal Text AA: 4.5:1 minimum contrast ratio
  • Normal Text AAA: 7:1 minimum contrast ratio
  • Large Text AA: 3:1 minimum contrast ratio
  • Large Text AAA: 4.5:1 minimum contrast ratio
  • Graphics AA: 3:1 minimum contrast ratio

ㅤ

The results panel displays pass/fail status for five accessibility standards:

  • ✅ = Passed (green)
  • ❌ = Failed (red)

➎ Contrast Controls Panel

  • Contrast Slider & Input: Set target contrast ratio (1.0-21.0)
  • Add to Swatches: Check to add both colors to document swatches
  • Hide Edges: Toggle visibility of object edges in the document
  • Preview: Enable to see changes applied to selected objects in real-time

➏ Step-by-Step Workflow

Basic Color Testing

  1. Select your background and foreground objects
  2. Run the script
  3. Review the WCAG results panel to see which standards are met
  4. If needed, adjust colors using the controls
  5. Click OK to apply changes or Cancel to discard

ㅤ

Adjusting Colors Manually

Using Sliders:

  1. Switch between HSB and RGB tabs as preferred
  2. Drag sliders to adjust color values
  3. Watch the contrast ratio and WCAG results update in real-time

ㅤ

Using Numeric Inputs:

  1. Click in any numeric field
  2. Type a new value
  3. Press Enter or Tab to apply
  4. Use Up/Down arrow keys for fine adjustments (hold Shift for larger steps)

ㅤ

Using Hex Codes:

  1. Click in the hex input field
  2. Type or paste a hex color code (with or without #)
  3. The color updates automatically as you type

ㅤ

Using Color Picker:

  1. Click on the background or foreground color preview at the top
  2. Choose a color from Illustrator's native color picker
  3. Click OK to apply the selected color

ㅤ

Achieving Target Contrast Ratio

  1. In the Contrast Controls panel, enter your desired ratio (e.g., 4.5 for AA normal text)
  2. Or use the contrast slider to select a ratio
  3. The script automatically adjusts both colors to meet the target
  4. Fine-tune manually if needed

ㅤ

Keyboard Shortcuts for Contrast Field:

  • Up/Down arrows: Adjust by 0.1
  • Shift + Up/Down arrows: Adjust by 1

ㅤ

Using Live Preview

  1. Check the Preview checkbox (enabled by default when objects are selected)
  2. All color adjustments are immediately applied to your selected objects
  3. Uncheck to disable live updates
  4. Click Cancel to revert all preview changes

ㅤ

Saving Colors to Swatches

  1. Check Add to Swatches before clicking OK
  2. Both background and foreground colors will be added to your document's swatches panel
  3. Swatches are named with their hex values (e.g., "BG #FFFFFF", "FG #000000")


☻ Wrap Up

Whether you're designing for web, print, or digital media, this script makes it easy to create accessible color palettes that work for everyone, including users with visual impairments.




Leave a comment

Contrast Checker

Version: 1.0.0

Updated:

Download Contrast Checker

  • 1.0.0 – Initial release.

    ㅤ

    ㅤ

    Tested on MacOS:

    ㅤ

    • Adobe Illustrator 2023 (27.0)
    • Adobe Illustrator 2024 (28.1)
    • Adobe Illustrator 2025 (29.0)

  • Supported Versions:

    • Compatible with Adobe Illustrator CS6 and later, including Adobe Illustrator CC versions.

    Operating Systems:

    • Works on both macOS and Windows platforms.

  • End User License Agreement (EULA)

    Last Updated: 21.12.2024

    ㅤ

    This End User License Agreement (“Agreement”) is a legal agreement between you (“User” or “Licensee”) and Samolevsky.com (“Licensor”) regarding the use of the Adobe Illustrator scripts (“Software”). By downloading, installing, or using the Software, you agree to be bound by the terms of this Agreement.

    ㅤ

    1. Grant of License

    Licensor grants the User a non-exclusive, non-transferable, and revocable license to use the Software in accordance with this Agreement.

    • Free Software: If the Software is provided for free, you may use it for personal or commercial purposes without payment, subject to the restrictions outlined in this Agreement.
    • Paid Software: If the Software is provided for a fee, you may use it only after payment has been made in full.

    ㅤ

    2. Usage Rights

    You are permitted to:

    • Install and use the Software on devices you own or control.
    • Use the Software in your personal or commercial projects, subject to compliance with this Agreement.

    ㅤ

    3. Restrictions

    You may NOT:

    • Reverse engineer, decompile, or otherwise attempt to discover the source code, underlying ideas, or algorithms of the Software.
    • Reuse, incorporate, or integrate any portion of the Software into any other software, product, or project, except as expressly permitted by the Licensor in writing.
    • Resell, redistribute, or share the Software, whether in its original or modified form, without prior written consent from the Licensor.
    • Claim ownership of the Software or its underlying code.
    • Use the Software in any way that violates applicable laws or regulations.

    ㅤ

    4. Ownership

    The Software and all intellectual property rights therein remain the exclusive property of the Licensor. This Agreement does not transfer ownership of the Software or any intellectual property rights to the User.

    ㅤ

    5. Disclaimer of Warranties

    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE LICENSOR BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    ㅤ

    6. Limitation of Liability

    To the maximum extent permitted by law, Licensor shall not be liable for any damages, including but not limited to direct, indirect, incidental, special, or consequential damages, arising out of or related to the use or inability to use the Software.

    ㅤ

    7. Termination

    This Agreement is effective until terminated. Licensor may terminate this Agreement immediately if you breach any term of this Agreement. Upon termination, you must cease all use of the Software and destroy any copies in your possession.

    ㅤ

    8. Updates and Support

    Licensor is not obligated to provide updates, support, or maintenance for the Software. However, updates may be provided at the sole discretion of the Licensor.

    ㅤ

    9. Governing Law

    This Agreement shall be governed by and construed in accordance with the laws of the State of New York, without regard to its conflict of law principles.

    ㅤ

    10. Entire Agreement

    This Agreement constitutes the entire agreement between you and the Licensor concerning the Software and supersedes all prior or contemporaneous understandings regarding such subject matter.

    By using the Software, you acknowledge that you have read this Agreement, understand it, and agree to be bound by its terms.

    ㅤ

    For any questions or concerns regarding this Agreement, please contact us at hello@samolevsky.com

Browse More Scripts

More Adobe Illustrator Scripts
  1. Explore Drop Shadow Effect
    Drop Shadow Effect

    Drop Shadow Effect

    Drop Shadow Effect is a powerful and intuitive ScriptUI tool for Adobe Illustrator that allows you to apply a live Drop Shadow effect to your selected artwork.

    Explore
  2. Explore Metaball Circles Connector
    Metaball Circles Connector

    Metaball Circles Connector

    Metaball Circles Connector is an Adobe Illustrator script that creates smooth, organic connections between circle shapes using metaball effects.

    Explore
  3. Explore Quick Rename
    Quick Rename

    Quick Rename

    Quick Rename is a powerful Adobe Illustrator script that streamlines the process of renaming selected objects in your document.

    Explore

Introducing ScriptBox

Your Complete Adobe Illustrator Productivity Hub

Install Extension

➊ Toolbox

Access to 200+ pre-built scripts organized in categories.

➋ Script Launcher

Load and manage third-party scripts from custom folders.

➌ Panel Manager

Quick access to toggle Adobe Illustrator's built-in panels

➍ Favourites

Save frequently used scripts and panels for quick access.

➎ Code Editor

Write, edit, and execute custom ExtendScript/JavaScript code.

➏ Task Manager

An integrated to-do list that helps you track design tasks and jot down your ideas.

➐ Video Player

Create your own personal video library and watch YouTube videos right within the extension.

➑ Image Gallery

A visual moodboard allowing you to keep inspiration and reference materials right in your workspace while you design.

☻ Info

A heartfelt "Thank You" section to recognize our amazing Patreon supporters who help make ScriptBox possible.

Required Software

Adobe Illustrator

Learn more

Adobe Illustrator is a professional vector graphics software developed by Adobe Inc. It is widely used by designers, illustrators, and artists for creating a variety of digital artwork, including logos, icons, illustrations, typography, and complex design layouts. Illustrator is known for its precision and scalability, allowing users to create high-quality graphics that can be resized without losing clarity. Its features include powerful drawing tools, customizable brushes, advanced typography options, and seamless integration with other Adobe Creative Cloud applications. Illustrator is a go-to tool for creative professionals working on projects for print, web, and multimedia platforms.

  • 🅰 Locating the Scripts Folder

    To install a Contrast Checker.jsx script in Adobe Illustrator, you need to place it in the correct directory where Illustrator
can recognize it. Follow these steps to locate the Scripts folder:

    1. MacOS:
      Open Finder and navigate to:
      Applications/Adobe Illustrator <Version>/Presets/<Language>/Scripts
    2. Windows:
      Open File Explorer and navigate to:
      C:\Program Files\Adobe\Adobe Illustrator <Version>\Presets\<Language>\Scripts
    3. Replace <Version> with your Adobe Illustrator version (e.g., 2025).
    4. Replace <Language> with your language folder (e.g., "de_DE" for German, "en_US" for English).

    ㅤ

    🅱 Installing the Script

    1. Copy the Script File: Copy the Contrast Checker.jsx file to the Scripts folder located in the path above.
    2. On some systems, you may need administrator permissions to modify the Scripts folder.
    3. Restart Adobe Illustrator: To refresh the scripts menu, close and reopen Adobe Illustrator.

    ㅤ

    Explore our complete guide to mastering Adobe Illustrator scripts.

    1. Open Adobe Illustrator and ensure a document is active.
    2. Go to the top menu bar and select File > Scripts.
    3. If the script is installed in the Scripts folder, it will appear in the dropdown list.
    4. Click the Contrast Checker script to run it.
    5. The Contrast Checker script will execute, and any dialog boxes or results will appear based on the script’s functionality.

    ☻ Before running any scripts, it’s strongly advised to save your work — especially when working with complex or large documents.

Got questions?

Need help or have an idea to share? We’d love to hear from you! Whether you have questions, found a bug, have a feature request, or just want to share your feedback, reach out to us—we’re here for you! 

Ask a Qestion

Shop More Creative Assets