Data

Tools

Indexes

Applications

Experiments

Open Source Science

masterproject

Wordpress Plugin for checking contrasts between text and images

https://github.com/jerreeey/masterproject

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (9.5%) to scientific vocabulary
Last synced: 6 months ago · JSON representation ·

Repository

Wordpress Plugin for checking contrasts between text and images

Basic Info
  • Host: GitHub
  • Owner: jerreeey
  • Language: JavaScript
  • Default Branch: master
  • Size: 56.6 KB
Statistics
  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • Open Issues: 0
  • Releases: 2
Created about 2 years ago · Last pushed almost 2 years ago
Metadata Files
Readme Citation

README.md

Image Contrast Checker - WP Plugin

This is a WordPress plugin to check contrasts between image and text. Contrasts are checked according to the Web Content Accessibility Guidelines Conformance Level 2.2. In addition there is an option available to automatically optimize the contrast via the plugin.

How to install

  • Download zip file "imageContrastChecker.zip"
  • Click on "Plugins" and "Add new" within your WordPress Interface
  • Upload zip File "imageContrastChecker.zip"

How to develop

There are multiple ways to develop a WordPress Plugin. I will simply describe my chosen environment.

Prerequisites

  • Docker
  • node/npm

Setup

  • clone repo
  • add .env file into the root folder with following params and fill in values
    • MYSQL_DATABASE=
    • MYSQL_USER=
    • MYSQL_PASSWORD=
    • MYSQLROOTPASSWORD=
  • run npm install within "imageContrastChecker" directory
  • run docker compose build

Local development (at the first start up you will need to configure WordPress)

  • run docker compose up
  • run npm watch within "imageContrastChecker" directory
  • open localhost:8080 to open WordPress Interface
  • Activate Plugin under "Plugins"

Features

  • Automatic Contrast Checking of "cover" blocks on Post/Page saving action
  • "Check contrast" Button on Post/Page sidebar to manually trigger the checking process
  • Error/Warning/Success Notices depending on violation of WCAG 2.2 Success Criterion 1.4.3 and 1.4.11
  • Highlight violating block
  • Autmatically fixing contrast issues through either
    • adding or adjusting an image overlay
    • increasing the text size
    • adjusting the text color
    • adjusting the background color of the text

Owner

  • Name: Jeremias Rauwolf
  • Login: jerreeey
  • Kind: user

Citation (CITATION.cff) 

cff-version: 1.2.0
title: Image Contrast Checker
message: >-
  If you use this software, please cite it using the
  metadata from this file.
type: software
authors:
  - given-names: Jeremias
    family-names: Rauwolf
repository-code: 'https://github.com/jerreeey/masterproject'
abstract: >-
  This is a WordPress plugin to check contrasts between
  image and text. Contrasts are checked according to the Web
  Content Accessibility Guidelines Conformance Level 2.2. In
  addition there is an option available to automatically
  optimize the contrast via the plugin.
keywords:
  - Web Accessibilty
  - Image Contrast Checker
  - WordPress
commit: 4cada73
version: '1.0'
date-released: '2024-02-16'

GitHub Events

Total
Last Year

Dependencies

docker-compose.yml docker
  • mariadb 10.6.4-focal
  • phpmyadmin/phpmyadmin latest
  • wordpress 6.2.2-apache
imageContrastChecker/package.json npm
  • vite ^5.0.12 development
  • canvas-object-fit ^0.8.1
  • canvas-txt ^4.1.1